2D转换:
CSS转换:使元素改变形状、尺寸和位置的一种效果
transform:
translate 平移: /* 水平平移 正值向右 负值向左 */
/* 竖直平移 正值向下 负值向上 */
/* 综合写 第一个水平 第二个数值 */
rotate 旋转:/* 以元素中心旋转 正值顺时针 负值逆时针*/
scale 缩放:/* >0 0-1缩小 >1放大 */
skew 倾斜:/* 包含两个参数值,分别表示X轴Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。skewX(<angle>);表示只在X轴(水平方向)倾斜。skewY(<angle>);表示只在Y轴(垂直方向)倾斜。 */
3D转换:
想要看到立体效果就需要加上透视
透视perspective:透视也称为视距,视距就是眼睛到屏幕的距离
距离视觉点较近的在电脑平面成像越大,越远成像越小
透视的单位是像素px
透视写在被观察元素的父元素上
rotateX(80deg):正值向上翻转
rotateY(180deg):正值向右翻转
translateZ(100px):正值向前,负值向后 透视原理:近大远小 。