@xunuo 2018-08-14T16:59:32.000000Z 字数 5202 阅读 803

transition和transform属性

前端

css 3 实现动画效果

transition属性
不同浏览器前缀不同：
- Chrome/safari:-webkit-transition
- Firefox:-moz-transition
- opera:-0-transition
使用格式：transition：要改变的属性过渡时间过渡模式(过渡模式可不填)
示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test-transition</title>
        <style>
            #test-transition{
                position: absolute;
                height: 400px;
                width: 400px;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                background-color: #00438A;
                -webkit-transition:background-color 3s;
            }
            #test-transition:hover{
                background-color: #00EE00;
            }
        </style>
    </head>
    <body>
        <div id="test-transition">
        </div>
    </body>
</html>

使水平垂直居中：

    position: absolute;//使用绝对定位
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;

transition也可将其分开为两个属性：

/*ex:-webkit-transition:background-color 3s;
可分解为
-webkit-transition-property:background-color;
-webkit-transition-duration: 3s;*/

实现多个属性的过度：

方法1：

-webkit-transition: 属性1 时间1,属性2 时间2;

方法2：

-webkit-transition: 属性1 时间1；
-webkit-transition: 属性2 时间2；

过渡模式(不设置过渡模式时默认为ease)
- 也可用transition-timing-function属性
- 分类：
  - ease：缓慢开始，缓慢结束
  - linear：匀速
  - ease-in：缓慢开始
  - ease-out:缓慢结束
  - ease-in-out：缓慢开始，缓慢结束(但与ease效果有区别)

设置3D场景
- 设置距离与观察位置：

 -webkit-perspective:800px;//物体与屏幕的位置
 -webkit-perspective-origin:50% 50%;//从屏幕中心观看

使用transform属性调整元素
- translate(位移操作)//单位是像素
  - translateX(x px)(正方向向右)
  - translateY(y px)(正方向向下)
  - translateZ(z px)(正方向垂直于屏幕向外)
- rotate(旋转操作)//单位是角度
  - rotateX(x deg)
  - rotateX(y deg)
  - rotateX(z deg)
- 以上操作在二维中照样适用
告诉浏览器所调整属性为3D的方法：
- -webkit-transform-style:-webkit-preserve-3d;
列子(实现x y z方向的平移和旋转)：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test-transition</title>
        <style>
            #test-transform {
                -webkit-perspective: 800px;
                -webkit-perspective-origin: 50% 50%;
                -webkit-transform-style: -webkit-preserve-3d;
            }
            #transform-body {
                width: 200px;
                height: 200px;
                margin: 0 auto;
                background-color: #00458A;
            }
            .p-design {
                margin: auto 500px;
            }
        </style>
    </head>
    <body>
        <div id="test-transform">
            <div id="transform-body">
            </div>
        </div>
        <div class="p-design">
            <div style="width: 50%;float: left;">
                <p>Translate
                    <span id="xtrans">0</span>px:</p>
                <input id="translatex" type="range" min="-400" max="400" value="0" onmousemove="change_value()" />
                <p>Translate
                    <span id="ytrans">0</span>px:</p>
                <input id="translatey" type="range" min="-400" max="400" value="0" onmousemove="change_value()" />
                <p>Translate
                    <span id="ztrans">0</span>px:</p>
                <input id="translatez" type="range" min="-400" max="400" value="0" onmousemove="change_value()" />
            </div>
            <div style="width: 50%;float: right;">
                <p>Rotate
                    <span id="xrotate">0</span>px:</p>
                <input id="rotatex" type="range" min="-360" max="360" value="0" onmousemove="change_value()" />
                <p>Rotate
                    <span id="yrotate">0</span>px:</p>
                <input id="rotatey" type="range" min="-360" max="360" value="0" onmousemove="change_value()" />
                <p>Rotate
                    <span id="zrotate">0</span>px:</p>
                <input id="rotatez" type="range" min="-360" max="360" value="0" onmousemove="change_value()" />
            </div>
        </div>
        <script type="text/javascript">
            function change_value() {
                var x = document.getElementById("translatex").value;
                var y = document.getElementById("translatey").value;
                var z = document.getElementById("translatez").value;
                var roX = document.getElementById("rotatex").value;
                var roY = document.getElementById("rotatey").value;
                var roZ = document.getElementById("rotatez").value;
                var transform_value = document.getElementById("transform-body");
                document.getElementById('transform-body').style.webkitTransform = "translateX(" + x + "px) translateY(" + y + "px) translateZ(" + z + "px) rotateX(" + roX + "deg) rotateY(" + roY + "deg) rotateZ(" + roZ + "deg)";
                document.getElementById("xtrans").innerText = x;
                document.getElementById("ytrans").innerText = y;
                document.getElementById("ztrans").innerText = z;
                document.getElementById("xrotate").innerText = roX;
                document.getElementById("yrotate").innerText = roY;
                document.getElementById("zrotate").innerText = roZ;
            }
        </script>
    </body>
</html>

页面动态翻转

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test-transition</title>
        <style>
            #page-body{
                -webkit-perspective: 800px;
                -webkit-perspective-origin: 50% 50%;
                overflow: hidden;
            }
            #page-all{
                -webkit-transform-style: preserve-3d;/*如果将这行设置在page-body内会使底部覆盖不完全*/
                width: 400px;
                height: 400px;
                position: relative;
                margin: 0 auto;
            }
            .page{
                width: 360px;
                height: 360px;
                background-color: #000000;
                position: absolute;
                color: #FFFFFF;
                padding: 20px;
                font-weight: bold;
                font-size: 360px;
                line-height: 360px;
                text-align: center;
            }
            #page1{
                -webkit-transform-origin: bottom;/*使围绕底部翻转*/
                -webkit-transition: -webkit-transform 1s linear;/*翻转过程时间为1s 动画为匀速*/
            }
            #page2,#page3,#page4,#page5{
                -webkit-transform-origin: bottom;
                -webkit-transition: -webkit-transform 1s linear;
                -webkit-transform: rotateX(90deg);/*使2 3 4 5页置于底部*/
            }
            #cli{
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="page-body">
            <div id="page-all">
                <div id="page1" class="page">1</div>
                <div id="page2" class="page">2</div>
                <div id="page3" class="page">3</div>
                <div id="page4" class="page">4</div>
                <div id="page5" class="page">5</div>
            </div>
        </div>
        <br>
        <div id="cli">
            <a id="prev" href="javascript:prevpage()">上一页</a>
            <a id="next" href="javascript:nextpage()">下一页</a>
        </div>
        <script type="text/javascript">
            var curPage=1;
            function prevpage(){
                if(curPage==1)
                    return;
                var tempPage=document.getElementById("page"+curPage);
                tempPage.style.webkitTransform="rotateX(90deg)";
                curPage--;
                document.getElementById("page"+curPage).style.webkitTransform="rotateX(0deg)";
            }
            function nextpage(){
                if(curPage==5)
                    return;
                var tempPage=document.getElementById("page"+curPage);
                tempPage.style.webkitTransform="rotateX(-90deg)";
                curPage++;
                document.getElementById("page"+curPage).style.webkitTransform="rotateX(0deg)";
            }
        </script>
    </body>
</html>

transition和transform属性

内容目录