CSS3-2D转换

transform属性

transform属性能对元素实现一些变形功能,他可以用于内联元素和块级元素.该属性可以旋转,缩放,移动元素.

常用的变形函数如下:

translate()
scale()
rotate()
shew()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Joe</title>
        <style type="text/css">
            li{
                background: red;
                margin: 10px;
                width: 80px;
                height: 80px;
                list-style: none;
                float: left;
                
            }
            
            #rotate:hover{
                background: yellow;
                transform: rotate(30deg);
            }
            
            #translate:hover{
                background: green;
                transform: translate(-10px,10px);
            }
            
            #scale:hover{
                background: pink;
                /*transform: scale(2);*/
                transform: scaleX(.5);
            }
            
            #shew:hover{
                background: saddlebrown;
                -webkit-transform: skew(30deg,20deg);/*Safari&&Chrome*/ 
                -moz-transform: shew(30deg,20deg);/*Firefox*/
                -ms-transform: shew(20deg,20deg);/*IE9*/
            }
        </style>
    </head>
    <body>
        <div id=""mydiv>
            <ul>
                <li id='rotate'><a href="#"></a></li>
                <li id='translate'><a href="#"></a></li>
                <li id='scale'><a href="#"></a></li>
                <li id='shew'><a href="#"></a></li>
            </ul>
        </div>
        
        
    </body>
</html>

CSS3-2D转换

transform属性

推荐阅读更多精彩内容