2D和3D的介绍

在CSS3中可以为任意元素添加2D的变形，我们能够对元素进行移动、缩放、转动、拉长或拉伸。转换是使元素改变形状、尺寸和位置的一种效果。3D转换是基于二维变换的相同属性，如果熟悉二维变换，会发现3D变形的功能和2D变换的功能类似。CSS3中的3D变换主要包括以下几种，如： 3D位移、 3D旋转、3D缩放、3D矩阵。

三维坐标系

要想实现2D和3D的转换，首先我们要对三维坐标系有一个认识，帮助我们对转换有更深入的理解。

2D转换

通过2D转换，我们够对元素进行移动、缩放、转动、拉长或拉伸

transform方法

函数	描述
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴

一、平移translate()

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数;

（1）X轴正方向移动px，Y轴正方向移动px。

transform: translate(50px,100px);

（2） X轴负方向移动50px

transform：translatex（-50px)：

（3）Y轴负方向移动50px

transform：translatey（-50px)：

二、旋转rotate()

通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

（1）X轴顺时针旋转30度

transform：rotate(30deg)；

（2）Y轴逆时针旋转30度

transform：rotatey(-30deg)；

三、scale() 方法

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：

（1）元素增加尺寸

transform：scale（1.2）；

（2）元素减小尺寸

transform：scale（0.8）；

四、skew() 方法

通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数；

transform: skew(30deg,20deg);

值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

3D转换

3d的坐标系，x轴在屏幕上为水平方向，y轴为垂直方向，而z轴为垂直于屏幕的方向。与2D变换的功能相类似。

函数	描述
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

转换的属性

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。
transform-style	规定被嵌套元素如何在 3D 空间中显示。
perspective	规定 3D 元素的透视效果。
perspective-origin	规定 3D 元素的底部位置。
backface-visibility	定义元素在不面对屏幕时是否可见。

（1）transform-origin

该属性可以改变元素的原点位置，默认情况，变形的原点在元素的中心点，或者是元素X轴和Y轴的50%处，如下图：

我们没有使用transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心（变形原点）位置进行变形的。但很多时候需要在不同的位置对元素进行变形操作，我们就可以使用transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。

使用规则

transform-origin(X,Y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom 。

top left | left top 等价于 0 0；
top | top center | center top 等价于 50% 0
right top | top right 等价于 100% 0
left | left center | center left 等价于 0 50%
center | center center 等价于 50% 50%（默认值）
right | right center | center right 等价于 100% 50%
bottom left | left bottom 等价于 0 100%
bottom | bottom center | center bottom 等价于 50% 100%
bottom right | right bottom 等价于 100% 100%

案例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*初始状态*/
        .heart {
            position: relative;
            width: 200px;
            height: 180px;
            background-color: blue;
            margin: 0 auto;
        }
        /*取基点左下角，逆时针旋转45度*/
        .heart ::before {
                  position: absolute;
                  content: "";
                  left: 100px;
                  bottom: 0;
                  width: 100px;
                  height: 150px;
                  background-color: red;
                  border-radius: 50px 50px 0 0;
                  transform: rotate(-45deg);
                  transform-origin: 0 100%;
              }
        /*取基点右下角，顺时针旋转45度*/
        .heart ::after {
            position: absolute;
            content: "";
            left: 0px;
            bottom: 0;
            width: 100px;
            height: 150px;
            background-color:red;
            border-radius: 50px 50px 0 0;
            transform: rotate(45deg);
            transform-origin: 100% 100%;
        }
    </style>
</head>
<body>
<div class="heart">
    <div></div>
</div>
</body>
</html>

（2）transform-style

语法

transform-style: flat | preserve-3d

取值

flat：所有子元素在 2D 平面呈现。

preserve-3d：保留3D空间。

（3）perspective

perspective属性固名思义就是透视的意思；该属性可以定义3D视觉的角度，父元素拥有perspective属性，让子元素使用3D特效时能够完整显示。

只要是3D场景都会涉及视角问题和透视的问题。在Transform中的设置方法如下：

只能选择透视方式，也就是近大远小的显示方式。
镜头方向只能是平行Z轴向屏幕内，也就是从屏幕正前方向里看。
可以调整镜头与平面位置（用perspective属性）：

perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示，镜头距离元素表面的位置是300像素。
perspective-origin属性规定了镜头在平面上的位置。默认是放在元素的中心。

案例一

<!DOCTYPE html>
<html>
<head>
<style>
.block
{
position: relative;
height: 150px;width: 150px;margin: 50px;padding:10px;
border: 1px solid black;
perspective:150px;
}
 
.child
{
position: absolute;
padding:50px;border: 1px solid black;background-color: yellow;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<div class="block">
  <div class="child">LALA</div>
</div>
</body>
</html>

原图 X轴旋转45度 perspective：150px

案例二

<!DOCTYPE html>
<html>
<head>
    <style>
        body{  background-color: black;  }
        .images {  width: 200px;  height: 200px;  margin: 100px auto;  perspective:400px;  }
        .images img{  width: 100%;  height: 100%;  transform: rotatey(45deg);  }
    </style>
</head>
<body>
<div class="images">
    <img src="./img/5b7d074cN4ba7e369.jpg" alt=""/>
</div>
</body>
</html>

原图

Y轴旋转45度

是不是效果不明显？这是因为镜头离平面太远了，所以旋转效果不明显。现在我们试试perspective属性。我们设置perspective:400px;

CSS3---2D和3D转换