css3 2d变形属性值有哪些?

css3 2d变形属性值有哪些?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

css3变形属性:transform

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

变形属性在2d的平面中的属性值:

  • translate() 在平面进行位置的移动

  • rotate() 在平面进行旋转

  • scale() 在平面进行缩放

  • skew() 在平面进行倾斜

首先来说2d位移

2d位移:

transform:translate(参数1,参数2)
  • 参数1:在X轴移动的距离

  • 参数2:在Y轴移动的距离

参数的设置:

  • 如果是正值的情况下:X轴往右、Y轴往下

  • 负值的情况下:X轴往左、Y轴往上

例:

1.png

2.png

我们也可以单独设置X轴/Y轴的位移:

transform:translateX(参数);  按照X轴方向位移

transform:translateY(参数);  按照Y轴方向位移

2d缩放:

transform:scale(参数1,参数2);
  • 参数1:X轴缩放的比例

  • 参数2:Y轴缩放的比例

(0 - 0.999999之间是缩小,大于1 是放大,等于1为1倍大小不变)

注意:当两个参数相同的情况下可以只写一个参数。

我们同样能单独设置X轴/Y轴的缩放

transform:scaleX(参数);   按照X轴方向缩放

transform:scaleY(参数);   按照Y轴方向缩放

例:

3.png

4.png

2d旋转:

transform:rotate(参数);    (旋转的度数单位:deg)

默认情况下:绕着中心点进行转动

参数为正数时 旋转的方向为顺时针旋转,参数为负值时 旋转方向为逆时针旋转

我们当然也可以单独设置围绕某个轴进行旋转的

transform:rotateX(参数)   围绕X轴旋转

transform:rotateY(参数)   围绕Y轴旋转

例:

5.png

6.png

2d倾斜:

transform:skew(参数1,参数2);   (倾斜的角度单位:deg)
  • 如果是正值的情况下:X轴往右、Y轴往下

  • 负值的情况下:X轴往左、Y轴往上

毫不例外,倾斜也可以单独设置某个轴进行倾斜

transform:skewX(参数) 按照X轴方向倾斜

transform:skewY(参数) 按照Y轴方向倾斜

例:

7.png

8.png

更多web前端自学知识,请查阅 HTML中文网 !!

以上就是css3 2d变形属性值有哪些?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏