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>