一、2D变形 css3中三大功能： 1）过度：transition 2）动画：animation 3）变形：transform ie9开始兼容1.旋转： 语法： transform:rotate(30deg); totate:角度单位，一圈360deg,一圈π，弧度，弧度=角度*π / 180,一弧度=π=180deg π弧度=180deg 正方向：垂直向上为0deg，顺时针方向为正方向(水平向左为90deg，) 旋转角度：+(顺时针旋转) - (逆时针旋转)， transform:rotate(90deg) ==> transform:rotate(-270deg) 注意：任何变形都可以被过度， 2.缩放变形 语法：transform:scale(1,3); scale：缩放，数字，大于1表示放大，小于1表示缩小， scale(1.2,0.5); 参数1：横向放大1.2倍， 参数2：纵向缩小0.5倍 transform:scaleX(1,2);scaleY(0.5); 3.拉伸变形 语法：transform:skew(30deg,60deg); skew:歪斜扭曲，两个值分别是横向扭曲角度和纵向扭曲角度， transform:skewX(30deg) skew(60deg); 总结：2D变形有三种，旋转缩放扭曲 transform:rotate(30deg)scale(2,0.4) skew(20deg,30deg) 二、3D变形 1.舞台与演员的关系， ie10开始兼容 3D变形与2D变形事实上多了一个舞台的概念，舞台的作用是负责添加景深，(perspective),单位px，表示您的眼睛距离这个舞台的 距离，也可以理解为3D变形元素的陡峭程度，演员就是其中的变形元素，使用transform进行变形 2. rotateX(ndeg); 绕着X轴翻转n度 n为正数，向后翻 n为负数，向前翻 3.rotateY(ndeg); 绕着y轴翻转n度 n为正数，向右翻 n为负数，向左翻 4.rotateZ(ndeg); 绕着z轴翻转n度 Z轴：位于x轴和y轴交叉点，方向垂直变形元素所在的平面，正方向是该平面正面对的方向 n为正数，顺时针 n为负数，逆时针 5.rotate3d(a,b,c,d) a,b,c 0|1|-1 a:x轴。x轴不旋转，1：向后旋转，-1：x轴向前翻转 b:y轴。y轴不旋转，1：向右旋转，-1：y轴向左翻转 c:z轴。z轴不旋转，1：顺时针旋转，-1：逆时针翻转 n:表示旋转的角度 rotate3d(1,0,-1,30deg);x轴向后，y轴不转，z逆时针旋转30deg
转载于:https://www.cnblogs.com/txf-123/p/11190128.html
