移动web之3 D转换

一.3D转换之位移

        1.语法格式

                ◇X轴大拇指  水平方向右正值  水平方向左负值  即:transform:translateX(-100px);

                ◇Y轴食指  垂直方向向上是负值 向下是正值  即:transform:translateY(100px);

                ◇Z轴(面向自己的方向)中指  面对自己的方向移动正值,面向自己的反方向移动是负值 
 transform:translateZ(100px);

二.3D转换之旋转

       1.语法格式

                ◇ x轴的旋转 正值(从上往下)  负值(从下往上) 上下旋转  即: transform: rotateX(-180deg);

                ◇y轴的旋转  正值(从左往右) 负值(从右往左) 左右旋转  即:transform: rotateY(180deg);

                ◇z轴的旋转  正值(顺时针旋转) 负值(逆时针旋转) 转圈  即:transform:rotateZ(180deg);

 

三.3D转换之缩放 

        语法格式

                ◇宽:  transform: scaleX(2);   高: transform: scaleY(2);

                查看Z轴的缩放状态,添加透视,配合旋转使用 (先缩放,再旋转)      

                3D缩放连写  scale3d(x,y,z)