CSS3变形transform

不要嫌麻烦或简单而不去做 o(>﹏<)o不要啊！

前言：

CSS transform 属性允许你修改CSS视觉格式模型的坐标空间。

使用它，元素可以被转换 translate 、旋转 rotate 、缩放 scale 、倾斜 skew。
因为这些属性而去翻阅 W3C 或是 MDN 还是挺麻烦的，不如一次性列出它们的效果，这必须更方便；
不要嫌麻烦或简单而不去做。

效果图：

transform属性

代码部分：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .container{
                width: 200px;
                height: 200px;
                margin: 50px;
                float: left;
                border: 1px solid gray;
                
                /* 支持3D 空间呈现 */
                transform-style: preserve-3d;
            }       
            
            .box{
                width: 100%;
                height: 100%;
                opacity: 0.75;
            }   
            
            
            /* 2d 平移 */
            #div_1 .box{
                background-color: red;
                /*transform: translateX(-30px) translateY(30px);*/
                transform: translate(30px, -30px);
            }
            
            /* 2d 缩放 */
            #div_2 .box{
                background-color: deepskyblue;
                /*transform: scaleX(0.5) scaleY(0.8);*/
                transform: scale(0.5, 0.8);
            }
            
            /* 2d 旋转 */
            #div_3 .box{
                background-color: palevioletred;
                /*transform-origin: bottom center;*/
                transform: rotate(45deg) scaleX(1.2) scaleY(0.5);
            }
            
            /* 2d 倾斜 */
            #div_4 .box{
                background-color: darkblue;
                /*transform: skewX(30deg);*/
                /*transform: skewY(30deg);*/
                transform: skew(30deg, 30deg);
            }
            
            /* 3d 平移 */
            #div_5 .box{
                background-color: darkcyan;
                /*transform: perspective(200px) translateZ(50px);*/
                transform: perspective(600px) translate3d(50px, 50px, 100px);
            }
            
            /* 3d旋转 */
            #div_6 .box{
                background-color: brown;
                /*transform: perspective(600px) rotateX(45deg);*/
                /*transform: perspective(600px) rotateY(45deg);*/
                /*transform: perspective(600px) rotateZ(45deg);*/
                transform: perspective(600px) rotate3d(1, 1, 1, 45deg);
            }
            
            /* 3d 缩放 */
            #div_7 .box{
                background-color: orange;
                transform: perspective(600px) scaleZ(5) rotateX(45deg);
            }
            
        </style>
    </head>
    <body>
        <div id="div_1" class="container">
            <div class="box"></div>
        </div>
        
        <div id="div_2" class="container">
            <div class="box"></div>
        </div>
        
        <div id="div_3" class="container">
            <div class="box"></div>
        </div>
        
        <div id="div_4" class="container">
            <div class="box"></div>
        </div>
        
        <div id="div_5" class="container">
            <div class="box"></div>
        </div>
        
        <div id="div_6" class="container">
            <div class="box"></div>
        </div>
        
        <div id="div_7" class="container">
            <div class="box"></div>
        </div>
        
    </body>
</html>

CSS3变形transform

推荐阅读更多精彩内容