transform: 滑动、旋转、倾斜、缩放 2的3d 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }
    .box{
        margin-left: 100px;
    }
        .box div{
            width: 100px;
            height: 100px;            
            border:1px solid #ccc;
            text-align: center;
            display: table-cell;
            vertical-align: middle;
            margin-right: 20px;
            
        }
        .suofang:hover{
            transform:scale(1.5,1.5);
            transition: 2s;
            /*
            scale(x,y)    
            scale3d(x,y,z)    
            scaleX(x)    
            scaleY(y)    
            scaleZ(z)*/

        }
        .xuanzhuan{
            border-top-color: red !important;
            border-bottom-color: blue !important;
        }

        .xuanzhuan:hover{
            /*transform: rotate(180deg);*/
            transform: rotate3d(0.5, 0.5, 1, 180deg);
            /*transform: rotateX(180deg);*/
            /*transform: rotateY(180deg);*/
        /*    transform: rotateZ(180deg);*/
            transition: 5s;

        }


        .huadong:hover{
            transform:translate(200px,200px);
            transition: 2s;
/*
            translate(x,y)    
            translate3d(x,y,z)    
            translateX(x)    
            translateY(y)    
            translateZ(z)*/


        }
        .qingxie:hover{
            width: 50px;
            height: 50px;
            transform: skew(45deg,50deg);
/*            transform: skewX(45deg);
*/            /*transform: skewY(45deg);*/
            transition: 2s;
        }
        
    </style>
    
</head>
<body>
<div class="box">
    <div class="suofang" >缩放效果</div>
    <br>
    <div class="xuanzhuan">旋转</div>
    <br>
    <div class="huadong">滑动</div>
    <br>
    <div class="qingxie">倾斜</div>    
</div>
</body>
</html>

 

posted @ 2017-06-06 15:44  Jinsuo  阅读(666)  评论(0)    收藏  举报