CSS变形

2D变形:
transform :
rotate();旋转,()中写度数 如:90deg
translate(,);第一个值代表x轴移动,第二个值代表y轴移动,第二 个参数可以不写
scale(,);放大缩小,第一个值代表沿x轴,第二个值代表沿y轴,第
二个值可省略
skew(,);倾斜,第一个值向x轴偏移多少度角,第二个值向y轴偏移
多少角度第二个值可省略。
多个transform放在一起时,顺序不同效果不同。
transform-origin 定义旋转点 默认值为50%

CSS变形_第1张图片

3D变形:
perspective 透视效果

CSS变形_第2张图片

perspective-origin 设置透视角度 默认值为50%

translate3d();3d移动

CSS变形_第3张图片

rotate3d();3d旋转

CSS变形_第4张图片

transform-style:preserve-3d 保留3d空间

CSS变形_第5张图片

backface-visibility 背面不可见

CSS变形_第6张图片

你可能感兴趣的:(CSS变形)