2d转换
transform:none | <transform-function>+
默认值:none
适用于:所有块级元素及某些内联元素
transform:rotate(<angle>)
旋转一个角度-
transform:translate(<translation-value>[,<translation-value>]?)
- 在X轴[Y轴]?移动一个距离
- transform:translateX
- transform:translateY
- 默认为0
- 百分数参照物为当前盒子的大小
-
transform:scale(<number>[,<number>]?)
- 缩放倍数
- 第二个参数省略默认跟第一个值相等
-
transform:skew(<angle>[,<angle>]?)
- 倾斜一个角度
- 第二个参数默认为0
transform-origin 定位坐标轴的原点
transform-origin:[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]?
- 默认值:
50% 50%
,效果等同于center center - 适用于:所有块级元素及某些内联元素
- 设置或检索对象以某个原点进行转换。
- 该属性提供2个参数值。
- 如果提供两个,第一个用于横坐标,第二个用于纵坐标。
- 如果只提供一个,该值将用于横坐标;纵坐标将默认为50%。
- 如果提供3个,第三个用于z轴
3d转换
- 透视距离
perspective:none | <length>
用在变换元素的容器上
<length>
: 指定观察者距离「z=0」平面的距离,为元素及其内容应用透视变换。不允许负值
- perspective-origin 设置透视点
perspective-origin:[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]?
语法跟transform-origin
类似
- 指定透视点的位置。
- 该属性提供2个参数值。
- 如果提供两个,第一个用于横坐标,第二个用于纵坐标。
- 如果只提供一个,该值将用于横坐标;纵坐标将默认为center。
- translate3d()
translate3d(): 指定对象的3D位移。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴,参数不允许省略
translatex(): 指定对象X轴(水平方向)的平移
translatey(): 指定对象Y轴(垂直方向)的平移
translatez(): 指定对象Z轴的平移
- rotate3d(): 3d旋转
rotate3d(): 指定对象的3D旋转角度,其中前3个参数分别表示旋转的方向x,y,z,第4个参数表示旋转的角度,参数不允许省略
rotatex(): 指定对象在x轴上的旋转角度
rotatey(): 指定对象在y轴上的旋转角度
rotatez(): 指定对象在z轴上的旋转角度
demo:rotate(0,0,1,45deg)
- scale(): 3d缩放
scale3d(): 指定对象的3D缩放。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴,参数不允许省略
scalez(): 指定对象的z轴缩放
scalex(): 指定对象X轴的(水平方向)缩放
scaley(): 指定对象Y轴的(垂直方向)缩放
- transform-style:设置一个3d平台,保留内部的3d空间
transform-style:flat | preserve-3d
默认值:flat
+ flat
: 指定子元素位于此元素所在平面内
+ preserve-3d
: 指定子元素定位在三维空间内
+ 当该属性值为「preserve-3d」时,元素将会创建局部堆叠上下文。
+ 决定一个变换元素看起来是处在三维空间还是平面内,需要该元素的父元素上定义 <' transform-style '>
属性。
- backface-visibility
backface-visibility:visible | hidden
不可继承
默认值:visible
+ visible
: 指定元素背面可见,允许显示正面的镜像。
+ hidden
: 指定元素背面不可见