一、CSS3转换 transform

CSS3 转换是使元素改变形状、尺寸和位置的一种效果。

转换可以对元素进行

移动transform: translateX(200px)、

缩放transform: scaleY(0.5)、

旋转transform: rotate(-90deg)、

拉长或拉伸transform: skewX(-10deg)。

transfrom不会影响其他元素的位置

transfrom对内联元素（inline）没有效果

2D转换

2D转换表现在平面上，主要方法有：

translate() 平移

根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
div {transform: translateX(50px);transform: translateY(100px);/* transform: translateZ(50px); 3d */transform: translate(50px,100px);-ms-transform: translate(50px,100px); /* IE 9 */-webkit-transform: translate(50px,100px); /* Safari and Chrome */   
}
translate中的百分比单位是相对于自身元素的transform: translate(50%,50%);

rotate() 旋转
在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。需要带单位deg（角度）

div {/* transform: rotateX(30deg); 沿着X轴 从右往左看 顺时针旋转一定角度 3d *//* transform: rotateY(30deg); 沿着Y轴 从下往上看 顺时针旋转一定角度 3d *//* 沿着Z轴 顺时针旋转 2d 以方框中心为原点，顺时针旋转 */transform: rotate(30deg); 与 transform: rotateZ(30deg) 一样-ms-transform: rotate(30deg);        /* IE 9 */-webkit-transform: rotate(30deg);      /* Safari and Chrome */
}

scale() 放大缩小

该元素放大或缩小的大小，取决于宽度（X轴）和高度（Y轴）的参数，正数表示放大，小数表示缩小。以中心点进行缩放 >0 0-1就是缩小，>1就是放大
div {transform: scaleX(2)transform: scaleY(0.5);/* transform: scaleZ(0.5); 3d transform: scale(2,3); /* 标准语法 */-ms-transform:scale(2,3); /* IE 9 */-webkit-transform: scale(2,3); /* Safari */
}

skew() 倾斜

包含两个参数值，分别表示X轴Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

skewX(<angle>);表示只在X轴(水平方向)倾斜。

skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
div {transform: skewX(10deg);   /*正值向左倾斜   负值向右倾斜*/transform: skewY(10deg);   /* 正值就是左向上倾斜    负值就是左向下倾斜*/transform: skew(30deg,20deg);-ms-transform: skew(30deg,20deg); /* IE 9 */-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

3D转换

想要看到立体效果就需要加上透视 透视perspective ：透视也称为视距，视距就是眼睛到屏幕的距离，距离视觉点较近的在电脑平面成像越大，越远成像越小，透视的单位是像素px，透视写在被观察元素的父元素上

1、rotateX(80deg)：正值向上翻转

2、rotateY(180deg)：正值向右翻转

3、translateZ(100px)：正值向前，负值向后透视原理：近大远小。

<div class="box1"><div class="son1">1111</div>
</div>
?<style>.box1 {width: 500px;height: 500px;border: 2px solid #000;margin: 0 auto;perspective: 200px;}.son1 {width: 200px;height: 200px;background-color: red;margin: 100px 0 0 100px;}.box1:hover .son1 {transition: 2s;/*  向下翻转，上边朝里 ，负值就是向下翻转，上边朝外  *//* transform: rotateX(80deg); */  /*左边向外，向右旋转，负值就是左边向里，向右旋转*//* transform: rotateY(80deg); */ transform: translateZ(100px);}</style>

CSS3转换 transform

一、CSS3转换 transform

2D转换

translate() 平移

rotate() 旋转

scale() 放大缩小

skew() 倾斜

3D转换

1、rotateX(80deg)：正值向上翻转

2、rotateY(180deg)：正值向右翻转

3、translateZ(100px)：正值向前，负值向后 透视原理： 近大远小 。

3、translateZ(100px)：正值向前，负值向后透视原理：近大远小。