css3的新增属性transform_-ms-transform: rotate(30deg);-CSDN博客

本文链接：https://blog.csdn.net/xuanwuziyou/article/details/48035459

css3中可运用transform属性来实现让文字或图像显示出：旋转rotate,缩放scale,倾斜skew,移动translate 这些效果。

1. 旋转rotate

-ms-transform: rotate(30deg) ;

-moz-transform:rotate(30deg);

-webkit-transform:rotate(30deg);

-o-transform:rotate(30deg);

transform:rotate(30deg);

如上rotate(30deg)，30是度数，默认是顺时针旋转，deg是角度单位。角度设为负值时可逆时针旋转。

2. 缩放scale

-ms-transform: scale(3,2) ;

-moz-transform:scale(3,2);

-webkit-transform:scale(3,2);

-o-transform:scale(3,2);

transform:scale(3,2);

如上scale(x,y),表示使元素的宽度和高度分别变为原来的x倍，y倍。还有仅用于单方向的scaleX(x)和scaleY(y)可以用。

3. 扭曲skew

-ms-transform: skew(30deg,10deg) ;

-moz-transform:skew(30deg,10deg) ;

-webkit-transform:skew(30deg,10deg) ;

-o-transform:skew(30deg,10deg) ;

transform:skew(30deg,10deg) ;

如上skew(30deg,10deg),表示在水平方向扭曲30度，垂直方向扭曲10度。还有仅用于单方向的skewX(30deg)和skewY(30deg)可用。

4. 位移translate

-ms-transform: translate(100px,50px) ;

-moz-transform:translate(100px,50px) ;

-webkit-transform:translate(100px,50px) ;

-o-transform:translate(100px,50px) ;

transform:translate(100px,50px) ;

如上translate(100px,50px),表示水平方向右移100px，垂直方向下移50px。还有仅用于单方向的translateX(100px)和translateY(50px)。

5.对同一元素使用rotate,scale,skew,translate多种变形，并列写下即可

-ms-transform: translate(100px,50px) rotate(30deg) skew(30deg,10deg);

-moz-transform:translate(100px,50px) rotate(30deg) skew(30deg,10deg);

-webkit-transform:translate(100px,50px) rotate(30deg) skew(30deg,10deg);

-o-transform:translate(100px,50px) rotate(30deg) skew(30deg,10deg);

transform: translate(100px,50px) rotate(30deg) skew(30deg,10deg);

6.设置元素transform的基点,属性transform-origin

如rotate时改变旋转的基点，scale时改变缩放的基点，skew时改变扭曲的基点（translate时无所谓基点）

transform-origin的值有(以逗号分隔)：top left，top, top right, left , center, right, bottom left, bottom, bottom right

如，top left表示元素的最左上角的点， top表示元素顶线中央的点， top right表示元素最右上角的点，left表示元素左线中间的点。。。

例子：

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>transform</title>
    <style>
        div{
            border: 2px solid green;
            width: 200px;
            height: 40px;
            margin-bottom: 60px;
        }
        div#rotate{
            -ms-transform: rotate(30deg) ;
            -moz-transform:rotate(30deg);
            -webkit-transform:rotate(30deg);
            -o-transform:rotate(30deg);
            transform:rotate(30deg);

            transform-origin:top;
        }
        div#scale{
            -ms-transform: scale(3,1.2) ;
            -moz-transform:scale(3,1.2);
            -webkit-transform:scale(3,1.2);
            -o-transform:scale(3,1.2);
            transform:scale(3,1.2);
        }
        div#skew{
            -ms-transform: skew(10deg,0deg) ;
            -moz-transform:skew(10deg,0deg) ;
            -webkit-transform:skew(10deg,0deg) ;
            -o-transform:skew(10deg,0deg) ;
            transform:skew(10deg,0deg) ;
        }
        div#translate{
            -ms-transform: translate(100px,-50px) ;
            -moz-transform:translate(100px,-50px) ;
            -webkit-transform:translate(100px,-50px) ;
            -o-transform:translate(100px,-50px) ;
            transform:translate(100px,-50px) ;
        }

        div#rotate-scale{
            -ms-transform: rotate(30deg) scale(3,1.2);
            -moz-transform:rotate(30deg) scale(3,1.2);
            -webkit-transform:rotate(30deg) scale(3,1.2);
            -o-transform:rotate(30deg) scale(3,1.2);
            transform:rotate(30deg) scale(3,1.2);
        }
    </style>
</head>
<body>
<div>原样div</div>
<div id="rotate">rotate(30deg) 顺时针旋转30度</div>
<div id="scale">scale(3,1.2) 宽变3倍，高变1.2倍</div>
<div id="skew">skew(10deg,0deg) 横向扭曲10度，纵向不扭曲</div>
<div id="translate">translate(100px,-50px) 右移100px,上移50px</div>
<div id="rotate-scale">顺时针旋转30度且宽变3倍，高变1.2倍</div>
</body>
</html>