CSS3转换
转换
改变元素在页面中位置，大小，角度以及形状的一种方式
2D转换：只在x轴和y轴上发生转换效果
3D转换：增加了z轴的转换效果
一、转换属性
transform
取值：
（1）none，默认值，无任何转换效果
（2）transform-function 一个或多个转换函数，多个的话，中间用空格隔开
转换原点
transform-origin
取值：px为单位的数字
%
关键字 left/center/right top/center/bottom
取值个数：2个值表示，表示原点在x轴和y轴上的位置，3个值 ，表示原点在x轴，y轴，z轴上的位置
二、2D转换
1、位移
改变元素在页面中的位置
属性：transform
取值：
translate（x）：指定元素在x轴上的位移距离，+为由移，-为左移
translate（x，y）：指定元素在x轴和y轴上位移距离，
translateX（x），只设置x轴上的位移
translateY（y），只设置y轴上的位移
2、缩放
改变元素在页面中的尺寸
transform
取值：
（1）scale（value）
value 横向和纵向的缩放比例，默认为1
>1,放大
0<value<1缩小
-1<value<0翻转缩小
value<-1 翻转放大
（2）scale（value1，value2）
value1:x轴缩放比例
value2:y轴缩放比例
（3）scaleX（value1）
（4）scaleY（value1）
3、旋转
改变元素在页面的显示角度
transform:rotate(ndeg)
n为+：顺时针
n为-：逆时针
注意：
（1）旋转是连同坐标一起旋转，会影响旋转之后的位移效果
（2）旋转原点会影响最后旋转结果
4、倾斜
改变元素在页面中的形状
transform:skew(x)
skew（x）同skewX（x）
让元素向着x轴发生倾斜效果，x就是x轴与y轴的夹角
x：+ y轴逆时针倾斜
x：- y轴顺时针倾斜
skewY（y）
让元素向着y轴发生倾斜效果，y就是x轴与y轴的夹角
y：+ x轴逆时针倾斜
y：- x轴顺时针倾斜
5、3d
（1）透视距离‘模拟人的眼睛到3d转换元素之间的距离
perspective，此属性要加在转换元素的父元素上
（2）3D旋转
transform：
取值：
rotateX（xdeg）：以x轴为中心，旋转元素的角度
rotateY（ydeg）：以y轴为中心，旋转元素的角度
rotateZ（ydeg）：以z轴为中心，旋转元素的角度
rotate3D（x，y，z，ndeg），x，y，z取值大于0，表示参与旋转，取值为0表示不参与
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
