/**
*转换是 CSS3 中具有颠覆性的一个特征,可以实现元素的位移、旋转、变形、缩放,甚至支持矩阵方式。
*转换再配合过渡和动画,可以取代大量早期只能靠 Flash 才可以实现的效果。
*在 CSS3 当中,通过 transform 转换来实现 2D 转换或者 3D 转换。
*2D转换包括:缩放、移动、旋转
*
*
* 1.缩放 scale(X,Y); scaleX(X); scaleY(Y)
* 参数解释: x:表示水平方向的缩放倍数。y:表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。
* 取值:大于1表示放大,小于1表示缩小。不能为百分比。
*
* 2.位移:translate
* 例子: translate(X,Y); translateX(X); translateY(Y)
* x,y 取值百分比,或像素点
*
* 3.旋转:rotate(); rotateX(); rotateX();
* 度数,rotate()表示顺时针或者逆时针旋转
* rotateX()表示沿X轴旋转
* rotateY()表示沿Y轴旋转
*
* 特别地:transfrom-orgin 表示围绕那个点旋转
* 例如:transfrom-orgin:center bottom
*/
我们写几个简单例子:
缩放:
位移:
旋转:
以上代码仅仅表示其用法,效果就不进行演示了。
下面看一个具体例子及效果演示。
然后我们来看效果图
閱讀更多 小閆故事 的文章