前端基础（八.CSS3 2D 3D）

前言

转换是使元素改变形状、尺寸和位置的一种效果。在CSS3中新增了2D和3D的转换方法。

CSS3 2D转换

其中转换所需的新属性如下：

• transform：设置元素为 2D 或 3D 转换
• transform-origin：改变被转换元素的源点位置

其中2D转换常用的方法如下：

• matrix(n,n,n,n,n,n)：2D 转换中，使用六个值的矩阵（复合属性）
  matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

        div{
            border: lightskyblue 2px solid;
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            background-color: lightsalmon;
            color: lightseagreen;
            transition: transform 2s;
            margin:100px auto 20px;
        }
        div:hover{
            transform: matrix(.5,1,1,.5,1,-1);
        }

如图利用:hover、matrix方法以及上一节提到的过渡transition，将2D转换做出类似3D转换的效果：

• 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轴

div{
            border: lightskyblue 2px solid;
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            background-color: lightsalmon;
            color: lightseagreen;
            transition: transform 2s;
            margin:100px auto 20px;
        }
        div:hover{
            transform: rotate(30deg) translate(20px,20px) scale(.7,.7) skew(10deg,10deg);
        }

将如上代码应用后：

CSS3 3D转换

CSS3 的 3D转换在2D的基础上除XY轴以外还新增了Z轴，使平面图形看起来更加立体。

如下图利用CSS3的3D转换和下一节将介绍的CSS3动画完成了旋转立方体：

其中3D转换所需的新属性如下：

• transform：设置元素为 2D 或 3D 转换

• transform-origin：改变被转换元素的源点位置

• transform-style：子元素如何在 3D 空间中显示

  transform-style: flat|preserve-3d;
子元素不保留其 3D 位置|子元素将保留其 3D 位置

• perspective：设置3D 元素的透视效果

• perspective-origin：设置3D 元素的底部位置

• backface-visibility：设置元素在不面对屏幕时是否可见

其中3D转换在2D转换的基础上增加了如下方法：

• matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)：2D 转换中，使用16个值的矩阵（复合属性）
• translate3d(x,y,z)：3D 转换中，沿着XYZ轴移动
• translateZ(z)：3D 转换中，沿着Z轴移动
• scale3d(x,y,z)：3D 缩放转换
• scaleZ(z)：3D 缩放转换中，在Z轴方向缩放。
• rotate3d(x,y,z,angle)：3D 旋转
• rotateZ(angle)：设置沿 Z 轴的 3D 旋转。
• perspective(n)：设置 3D 转换元素的透视视图。

        body{
            background-color: black;
            perspective: 1000px;
        }
        div{
            border: lightskyblue 2px solid;
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            background-color: lightsalmon;
            color: lightseagreen;
            transition: all 2s;
            margin:100px auto 20px;
            float:left;
        }
        #div1{
            margin-left: 500px;
        }
        #div1:hover{
            transform-style: preserve-3d;
            transform: translateX(20px) rotateX(180deg) scale(.7,.7) ;
        }
        #div2:hover{
            transform-style: preserve-3d;
            transform: translateX(20px) rotateZ(180deg) rotateX(90deg) rotateY(90deg) scaleX(.5) scaleY(.5) ;
        }

运行以上代码后，得到更加立体的3D转换：

以上为本萌新个人总结，如有不当之处望指正，有问题可以联系
邮箱：yuna_03@163.com或
QQ：2635591841

更于2021.2.3