【前端】【html5/css3】前端学习之路（三）（CSS3 2D变形/CSS3 3D变形/CSS3浏览器前缀）

一、2D变形(CSS3) transform

transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

1.移动【 translate(x, y) 】

translate是移动、平移的意思，也就是在2D平面内以X轴和Y轴为标准进行移动。

格式（x和y可为负值）：

translate(xpx,ypx)：水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(xpx)：仅水平方向移动（X轴移动）
translateY(ypx)：仅垂直方向移动（Y轴移动）

translate可以用来让已经定位的盒子水平垂直居中。

以前的水平居中方式：

.box {
            width: 499.9999px;
            height: 400px;
            background: pink;
            position: absolute;
            left:50%;
            top:50%;
            /*让盒子在X轴和Y轴都走自己的一半，以达到居中的目的*/
            margin-top: -200px;
            margin-left: -250px;
        }

用translate方式水平垂直居中：

.box {
            width: 499.9999px;
            height: 400px;
            background: pink;
            position: absolute;
            left:50%;
            top:50%;
            transform:translate(-50%,-50%);  /* 走的自己的一半 */
        }

2.缩放【 scale(x, y) 】

格式：

transform:scale(0.8,1);

可以对元素进行水平/垂直方向的缩放，以上语句的意思是 该元素在水平方向上缩小了20%，垂直方向上不变。

scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）

scale的默认值为1，数值为0-0.99时该元素缩小，>1时该元素方法。

3.旋转【 rotate(x deg) 】

对元素进行旋转，正值为顺时针，负值为逆时针。

格式：

transform:rotate(45deg);

注意deg是度数。

4.transform-origin调整元素转换变形的原点

scale/rotate都可以用t-r来规定发生变化的原点。

示例：

rotate：

        div {
            width: 500px;
            height: 300px;
            background-color: red;
            transition: all 0.5s;
            transform-origin: right top;
            margin: 100px auto;
        }
        div:hover {
            transform: rotate(180deg);
        }

scale：

div {
            width: 500px;
            height: 300px;
            background-color: red;
            transition: all 0.5s;
            transform-origin: right top;
            margin: 100px auto;
        }
        div:hover {
            transform: scale(2);
        }

自行测试。

案例：

目标效果：

图片：

代码：

       div {
            width: 225px;
            height: 150px;
            margin: 300px auto;
            position: relative;
        }
        img {
            width: 225px;
            height: 150px;
            position: absolute;
            top: 0;
            left: 0;
            transform-origin: top right;
            transition: all 0.5s;
        }
        div:hover img:first-child {
            transform: rotate(60deg);
        }
        div:hover img:nth-child(2) {
            transform: rotate(120deg);
        }
        div:hover img:nth-child(3) {
            transform: rotate(180deg);
        }
        div:hover img:nth-child(4) {
            transform: rotate(240deg);
        }
        div:hover img:nth-child(5) {
            transform: rotate(300deg);
        }
        div:hover img:last-child {
            transform: rotate(360deg);
        }

<div>
    <img src="images/1.jpg" alt="">
    <img src="images/2.jpg" alt="">
    <img src="images/3.jpg" alt="">
    <img src="images/4.jpg" alt="">
    <img src="images/5.jpg" alt="">
    <img src="images/6.jpg" alt="">
</div>

5.倾斜【 skew(x deg, y deg) 】

格式：

transform:skew(30deg,0deg);

该实例通过skew方法把元素水平方向上倾斜30度，处置方向保持不变。

可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。

二、3D变形(CSS3) transform

3D运用比较少，后期基本都用JS制作3D效果，所以了解一下就可以。

2D指的是 X轴和Y轴

3D指的是 X轴 Y轴 Z轴

伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图

CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度，如下图

1.旋转【rotate】

（1）rotateX()

也就是沿着X轴立体旋转。

示例：

图片：

代码：

img {
            transition:all 0.5s ease 0s;
        }
        img:hover {

            transform:rotateX(180deg);
        }

<div>
    <img src="images/x.jpg" alt="">
</div>

（2）rotateY()

沿着Y轴立体旋转

示例：

图片：

代码：

img {
            transition:all 0.5s ease 0s;
        }
        img:hover {
            /*transform:rotateX(180deg);*/
            transform:rotateY(180deg);
        }

<div>
    <!--<img src="images/x.jpg" alt="">-->
    <img src="images/1498446043198.png" alt="">
</div>

（3）rotateZ()

沿着Z轴旋转。

img {
  transition:all .25s ease-in 0s;
}
img:hover {
  /* transform:rotateX(180deg); */
  /* transform:rotateY(180deg); */
  /* transform:rotateZ(180deg); */
  /* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */
}

2.透视（perspective）

电脑显示屏是一个2D界面，之所以有3D效果，靠的是透视效果。

透视距离原理：近大远小

示例：

body {
		perspective: 500px;
}
img {
		transition: all 5s;
}
img:hover {
		transform: rotateY(360deg);
}

<img src="images/1498446043198.png" alt="">

效果自行测试，图片上方已有。

3.移动【translate】

（1）translateX(x) / translateY(y) 已经讲过，此处不再赘述。

（2）translateZ(z)

transformZ的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。

比如设置了perspective为200px;那么transformZ的值越接近200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，我相信你正常情况下，是看不到自己的后脑勺的。

（3）translate3d(x, y, z)

其中x和y可以是长度值也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度，而z只能设置长度值。

（4）backface-visibility

backface-visibility 属性定义当元素不面向屏幕时是否可见。

案例：

代码：

        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 224px;
            height: 224px;
        }
        img {
            position: absolute;
            top: 0;
            left: 0;
            transition: all 4s;

        }
        /*第二个img进行了180度翻转，因为设置了不面向屏幕则隐藏，所以一旦翻转不面向，则隐藏，就露出了背面的第二张图片。*/
        img:last-child {
            backface-visibility: hidden;
        }
        div:hover img {
            -webkit-transform: rotateY(180deg);
        }

<div>
    <img src="images/qian.svg" alt="">
    <img src="images/hou.svg" alt="">
</div>

效果：

鼠标经过前：

鼠标经过后：

三、浏览器前缀

为了适应不同浏览器的兼容性，在新增的CSS3的属性都会增加前缀：

例如在webstrom中，如果输入transform：

点击tab后：

会自动为你填充格式。

需要注意一下在动画keyframs中，-webkit-并不是前缀，而是放在@符号之后：