CSS3的变形与动画
transform属性
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。主要有rotate(旋转)、scale(缩放)、skew(扭曲)和translate(移动)几种功能。
1.rotate
通过指定的角度对元素进行旋转,可以通过transform-origin属性的定义来指定旋转的基点,例如rotate(30deg),其中30是旋转角度,deg是单位,如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。
实例:
<!DOCTYPE html>
<html>
<head>
<style>
div{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}
</style>
</head>
<body>
<div> div元素</div>
<div id="div2"> div元素</div>
</body>
</html>
效果:
2.scale
scale()具有三种情况:
- scale(x,y)使元素在水平方向和垂直方向同时缩放(X轴和Y轴同时缩放)
- scaleX(x)元素仅在水平方向缩放(X轴缩放)
- scaleY(y)元素仅在垂直方向缩放(Y轴缩放)
它们具有相同的缩放中心点和基数,其中心点就是元素的中心位置,缩放基数为1,如果其值大于1那么元素放大,反之,则元素缩小。
用法:transform: scale(x,y)
x,y表示缩放的倍数。
实例: