在css3中可实现缩放效果的是transform属性。transform属性可以和scaleX()函数实现水平方向的缩放效果、可以和scaleY()函数实现垂直方向的缩放效果、可和“scale(x,y)”函数实现水平方向和垂直方向同时缩放。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
在css3中可实现缩放效果的是transform属性。
transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。
transform属性配合缩放方法可以将元素根据中心原点进行缩放。
css3缩放方法有3种情况:
(1)scaleX(x):元素仅水平方向缩放(X轴缩放);
(2)scaleY(y):元素仅垂直方向缩放(Y轴缩放);
(3)scale(x,y):元素水平方向和垂直方向同时缩放(X轴和Y轴同时缩放);
1、scaleX(x)
语法:
transform:scaleX(x)
说明:
x表示元素沿着水平方向(X轴)缩放的倍数,如果大于1就代表放大;如果小于1就代表缩小。
大家想想倍数是怎样一个概念就很好理解了。
2、scaleY(y)
语法:
transform:scaleY(y)
说明:
y表示元素沿着垂直方向(Y轴)缩放的倍数,如果大于1就代表放大;如果小于1就代表缩小。
3、scale(x,y)
语法:
transform:scale(x,y)
说明:
x表示元素沿着水平方向(X轴)缩放的倍数,y表示元素沿着垂直方向(Y轴)缩放的倍数。
注意,Y是一个可选参数,如果没有设置Y值,则表示X、Y两个方向的缩放倍数是一样的(同时放大相同倍数)。
举例:
CSS3缩放scale()用法 scale(2)
scaleX(2)
scaleY(2)
以上是在css3中可实现缩放效果的是什么属性的详细内容。更多信息请关注PHP中文网其他相关文章!