谈谈CSS3中transfrom,鼠标移入图片动态提示效果

1.定义和用法

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

2 transform的常见属性有哪些?

transform的属性包括: translate()/rotate() / skew() / scale() /,分别还有x、y之分,比如:rotatex() 和 rotatey() ,以此类推。

transform:translate()

含义:变动,位移;例如向右位移20像素,向上位移50像素(向左向下为负值) 实例如下

.test01{-webkit-transform:translate(20px,50px);-moz-transform:translate(20px,50px)}

transform:rotate()

含义:旋转;“deg”是表示旋转的度数 例如“180deg”表示旋转“180度”  实例如下

.test02{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg)}

transform:skew()

含义:倾斜  实例如下

.test03{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)} 

transform:scale()

含义:比例  1.8表示以1.8的比例放大 如果是放大整数倍如放大3倍 必须写成3.0  实例如下

.test03{-webkit-transform:scale(2.5);-moz-transform:scale(2.5)}

猜你喜欢

转载自blog.csdn.net/sayoko06/article/details/82963571