css3 transform变换，变形是静态效果，要做出动画需要transition过渡

前4种是变形：
1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切

5、perspective 设置透视距离
6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
7、translateX、translateY、translateZ设置三维移动
8、rotateX、rotateY、rotateZ设置三维旋转
9、scaleX、scaleY、scaleZ设置三维缩放
10、transform-origin 设置变形的中心点
11、backface-visbility 设置盒子背面是否可见

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变形动画</title>
    <style>
        .box{
            width:200px;
            height:200px;
            background-color: gold;
            border:1px solid #000;
            margin:50px auto;
            
            transition: all 1s ease;
        }
        
        .box:hover{
            /*平移，定位也可以做到同样效果，但是transform性能更高*/
            transform: translate(50px,50px);
        }



        .box2{
            width:200px;
            height:200px;
            background-color: gold;
            border:1px solid #000;
            margin:50px auto;
            
            transition: all 1s ease;
        }
        
        .box2:hover{
            /*缩放一倍：*/
            transform: scale(2,2);
        }    


        .box3{
            width:200px;
            height:200px;
            background-color: gold;
            border:1px solid #000;
            margin:50px auto;
            
            transition: all 1s ease;
        }
        
        .box3:hover{
            /*旋转45度：*/
            transform: rotate(45deg);
        }
        

        .box4{
            width:200px;
            height:200px;
            background-color: gold;
            border:1px solid #000;
            margin:50px auto;
            
            transition: all 1s ease;
        }
        
        .box4:hover{
            /*斜切：*/
            transform:skew(0,45deg) ;
        }

    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>
</html>

tranform-origin 设置变形的中心点:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box01,.box02,.box03,.box04{
            width:200px;
            height:200px;
            border:3px solid #000;
            background-color: gold;
            margin:30px;
            float:left;
            transition:all 500ms ease;
        }

        .box01:hover,.box02:hover,.box03:hover,.box04:hover{
            transform:rotate(45deg);
        }


        .box02{
            /*改变box02旋转的中心为left center;默认中心是：center,center;*/
            transform-origin: left center;
        }

        .box03{
            transform-origin: left top;
        }

        .box04{
            transform-origin:200px 200px;
        }

    </style>
</head>
<body>
    <div class="box01"></div>
    <div class="box02"></div>
    <div class="box03"></div>
    <div class="box04"></div>
</body>
</html>

三维旋转

rotate(deg)默认是按z轴旋转，可以改变轴，并加上透视值

旋转的轴向：
x:从左往右
y:从上往下
z:顺时针（从屏幕内往外）

规律：让轴对着自己，顺时针方向转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width:300px;
            height:300px;
            background-color:gold;
            border:3px solid #000;
            margin:50px auto 0;

            /*一般三维旋转加上这句，按三维空间旋转，默认是平面flat*/
            transform-style: preserve-3d;

            /*这里设置一个初始值，做变形的时候最好设置一个初始值，不然可能会出现bug*/
            transform:perspective(800px) rotateY(0deg);
            transition: all 1s ease;

        }
        .box:hover{
            /*按y轴旋转rotateY,加上透视值（800px是一个经验值）*/
            transform:perspective(800px) rotateY(45deg);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

三维旋转例子翻牌效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width:200px;
            height:300px;
            border:3px solid #000;
            margin:50px auto;
            position: relative;

        }

        .box .img{
            width:200px;
            height:300px;
            background-color: gold;
            position: absolute;
            left:0px;
            top:0;
            font-size:20px;
            text-align: center;
            line-height: 300px;

            /*三维旋转规范写法要加上这句*/
            transform-style: preserve-3d;

            transform:perspective(800px) rotateY(0deg);
            transition:all 1s ease;
            
            /*设置反转背面是否可见：hidden,visible,如果是hidden则反正后背面完全透明不可见*/
            backface-visibility:hidden;


        }

        .box:hover .img{
            transform:perspective(800px) rotateY(180deg);
        }


        .back{
            width:200px;
            height:300px;
            background-color: gold;
            position: absolute;
            left:0px;
            top:0;
            font-size:20px;
            text-align: center;
            line-height: 300px;
            transform:perspective(800px) rotateY(-180deg);
            transition:all 1s ease;
            /*背面不可见，初始值就是背面，一开始就不可见*/
            backface-visibility: hidden;
        }

        .box:hover .back{
            transform:perspective(800px) rotateY(0deg);
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="img">pic</div>
        <div class="back">图片的说明文字</div>
    </div>
</body>
</html>

posted @ 2019-03-01 16:22 greenfan 阅读(403) 评论(0) 收藏举报

刷新页面返回顶部

greenfan

css3 transform变换，变形是静态效果，要做出动画需要transition过渡

公告