CSS中变形

transform
none | <transform-function>


transform

rotate默认是以z轴进行旋转的,也可以以y轴或者x轴进行选择,即rotateY()和rotateX()


rotate方法负数是逆时针
rotate方法样例

平移translate方法

默认第一个参数是沿x轴往右偏移,第二个参数是沿y轴往下偏移。


translate方法

缩放scale方法

scale方法
scale样例

倾斜方法skew()

skew()方法
skew样例

transform属性可以有多个方法

多个方法
多个方法样例

transform-origin

设置坐标轴的轴心,原点的位置
默认值为50%


transform- origin
transform-origin样例

以上所述rotate选择方法,默认是以z轴为中心进行旋转的。

透视效果perspective

none | length
length是人眼到画面的距离【具体是到哪里还不清楚】,距离越小越明显。

perspective
沿y轴旋转透视样例

透视角度perspective-origin

perspective-origin
从正中间透视
左上角透视
为空默认是50%
左下角进行透视

translate3d()三个方向上的偏移

相对于translate多了一个z轴


translate3d()
x10px,y20%,z200px

sclae3d()3个轴上的缩放

z轴不会实际影响大小


scale3d()
配合translate方法之后,z轴放大则会有效果

rotate3d()

rotate3d()
rotate3d()案例

transform-style

flat | preserve-3d
默认是扁平化的

transform-style
按照y轴旋转了但是不现实
设置为preserve-3d之后,确实按照y轴进行旋转显示了

backface-visibility背面是否可见

backface-visibility
backface-visibility样例
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。