CSS3-手册、Transition、Transform

Paste_Image.png

<h5>1.手册的使用</h5>

手册属性-transition:

Paste_Image.png


[]      表示全部可选项
||     表示或者
|       表示多选一
？      表示0个或者1个
*       表示0个或者多个
{}      表示范围

Paste_Image.png


 transition:color,width,height .5s ease 1s;/* color、width、height等三值参加过度，持续时间0.5秒，使用ease方式（默认就是这方式），延迟1秒执行 */

</br>

<h5>2.过渡属性Transition</h5>

给一些属性添加渐渐改变的时间、方式、延迟等。


    transition: 参加过渡的属性值 时长 方式 延迟;

</br>

<h5>3.变换属性Transform</h5>

可以对x、y、z进行缩放、偏移旋转等等操作，开启3D空间后有3D效果。


transform: 各种操作 , ...;

</br>
</br>

整体效果图：

1plane.gif


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>plane</title>

    <style type="text/css">
        
        *{
            margin : 0px;
            padding: 0px;
        }

        div{
            position: absolute;
            width: 150px;
            height: 150px;
            font-size: 30px;
            color: #fff;
            text-align: center;
        }

        .testx{
            background-color: red;
            left: 100px;
            top: 100px;
            transition: all 2s; /* 过渡  all-->>所有属性  2s-->>过度时间  */
            /*transform: rotateX(200deg) scaleX(1) translateX(-50px);*/
        }

        .testy{
            background-color: yellow;
            left: 400px;
            top: 100px;
            transition: transform 2s;/* transform这个属性才有过渡 */
            /*transform: rotateY(300deg) translateY(50px);*/
        }

        .testz{
            background-color: blue;
            left: 700px;
            top: 100px;
            transition: all .7s;
            /*transform: rotateZ(360deg) translateZ(10000px);  没有开启3d空间 translateZ(10000px)无效*/ 
        }

        .skew1{
            background-color: green;
            left: 300px;
            top: 300px;
            transition: all 2s;
            /*transform: skew(45deg,45deg); 这个方式似乎不像文档说的扭曲x，y的角度，在chrome54中是两值相加扭曲x，两值为45度则扭曲成线*/
        }

        .skew2{
            background-color: cyan;
            left: 600px;
            top: 300px;
            transition: all 2s;
            /*transform: skewX(45deg) skewY(45deg); 分别设置x、y的扭曲在chrome54中没有长生累加*/
        }

    </style>

    <script type="text/javascript">
        
        window.onload = function() {


            var testx = document.querySelector(".testx");
            // transform: rotateX(200deg) scaleX(1) translateX(-50px);
            testx.style["transform"] = "rotateX(200deg) scaleX(1) translateX(-50px)";
        

            var testy = document.querySelector(".testy");
            // transform: rotateY(300deg) translateY(50px);
            testy.style["transform"] = "rotateY(300deg) translateY(50px)";



            var testz = document.querySelector(".testz");
            // transform: rotateZ(360deg) translateZ(10000px);
            testz.style["transform"] = "rotateZ(360deg) translateZ(10000px)";


            var skew1 = document.querySelector(".skew1");
            /*transform: skew(45deg,45deg); */
            skew1.style["transform"] = "skew(45deg,45deg)";


            var skew2 = document.querySelector(".skew2");
            /*transform: skewX(45deg) skewY(45deg);*/
            skew2.style["transform"] = "skewX(45deg) skewY(45deg)";

        };

    </script>

</head>
<body>

    <div class="testx">testx</div>
    <div class="testy">testy</div>
    <div class="testz">testz</div>
    <div class="testskew">
        <div class="skew1">skew1</div>
        <div class="skew2">skew2</div>
    </div>

</body>
</html>

</br>
</br>
</br>


18张图片每张Z轴旋转20deg。
    设置旋转点为平面右下角 transform-origin: right bottom; 
    动画过度1秒 transition: all 1s;

pk.gif


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pk</title>

    <style type="text/css">
        
        .div{
            position: relative;
            width: 80px;
            height: 100px;
            margin: 200px;
        }

        .div img{
            width: 100%;
            height: 100%;
            position: absolute;
            transform-origin: right bottom;
            transition: all 1s;
        }

    </style>


</head>
<body>
    
    <div class="div"></div>

    <script type="text/javascript">

        var div = document.querySelector(".div");

        var imgs = [];

        for(var i=0;i<18;i++){
            var img = document.createElement("img");
            img.src = "img/pk1 ("+(i+1)+").jpg";
            imgs[i] = img;
            div.appendChild(img);
        }

        div.onmouseover = function() {
            for(var i=0;i<imgs.length;i++){
                imgs[i].style["transform"] = "rotateZ("+20*(i+1)+"deg)";
            }
        };

        div.onmouseout = function(){
            for(var i=0;i<imgs.length;i++){
                imgs[i].style["transform"] = "rotateZ(0deg)";
            }
        };

    </script>

</body>
</html>

</br>
</br>
</br>
</br>
</br>