CSS3 transform 详解

2024年2月11日 108次阅读 来源: caozheng550

最近在做H5，发现还是对transform了解的不是特别深刻，这里做一个总结。

CSS3 transform

transform的含义是：改变，使…变形；转换

CSS3 transform都有哪些常用属性

rotate()
// 旋转

skew()
// 倾斜

scale()
// 缩放

translate(,)
// 变动, 位移

  • transform:rotate()：

含义：旋转；其中“deg”是“度”的意思，如“10deg”表示“10度”下同。
是以当前元素的中心为重心,旋转顺时针开始。0deg就是普通的状态,180deg将会倒置

  • transform : skew()：

含义：倾斜
单位:deg
用法:以自身元素为基础,值为正数时向右倾斜skew(44deg),值为负数时向左倾斜(-44deg)
特殊值:-90deg,90deg,视觉上元素消失。180deg,-180deg恢复。一次类推。

  • transform:scale()：

含义：比例
单位：无
用法: 值为正数且value>1时按照数值比例放大transform:scale(1.5)，
值为正数且0<value<1时按照数值比例缩小transform:scale(0.5),
值为负数时：-1< value <0 时,同样缩小|value|并且rotate(180deg),
值为负数时:value < -1时，放大|value|并且rotate(180deg)

  • transform:translate(x,y)：

含义: 变动，位移
单位: px(rem)
用法: 把目标元素中点理解为平面坐标系的(0px,0px)，所有的操作全部基于(0,0)起始点。

    原文作者：caozheng550
    原文地址: https://segmentfault.com/a/1190000007674786
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞