CSS基础-3D变形-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS基础-3D变形。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

今天介绍两种 3D变形的形式：3D旋转、空间位移。

3D旋转

在上一节 2D变形中，我们用到了 transform 属性。那么在3D旋转中同样还是这个属性（怎么老是它，手动狗头）。

用rotateX() 函数来给 transform 属性赋值，即可实现元素标签绕X（横）轴3D旋转。

语法

// 绕横轴（盒子X轴中心线 旋转 30 度）
transform: **rotateX**(30deg)

用rotateY() 函数来给 transform 属性赋值，即可实现元素标签绕Y（横）轴3D旋转。

语法

// 绕纵轴（盒子Y轴中心线 旋转 30 度）
transform: **rotateY**(30deg)

用rotateZ() 函数来给 transform 属性赋值，即可实现元素标签绕Z（竖）轴3D旋转。

语法

// 绕纵轴（盒子Y轴中心线 旋转 30 度）
transform: **rotateZ**(30deg)

如果只用单独的transform 和一个空间旋转函数来做，可能视觉上并不能达到要求。

举例

Untitled 1.png

红色部分就是 box1 , 其实它是一个正方形，当我们设置了 X轴旋转后，它看起来像一个长方形，其实这是因为旋转造成的，而网页又是一个平面，我们看不到旋转到里面的那一部分，所以呈现出来的就是一个长方形。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0" />
    <title>Document</title>

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box1 {
        width: 200px;
        height: 200px;
        background-color: red;
        transform: rotateX(30deg);
      }
      .parentBox {
        width: 200px;
        height: 200px;
        border: 1px orange solid;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="parentBox">
      <div class="box1"></div>
    </div>
  </body>
</html>

如果想看出是旋转的样子，还需要一个属性配合, 那就是 perspective。

perspective

perspective 表示观察者（人）到平面元素的距离。值越大，表示距离平面元素越远。

配合 transform 如下

Untitled 2.png
举例

实现子元素沿X轴旋转 30度。

Untitled 3.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0" />
    <title>3D旋转示例</title>

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box1 {
        width: 200px;
        height: 200px;
        background-color: red;
        transform: rotateX(30deg);
      }
      .parentBox {
        width: 200px;
        height: 200px;
        border: 2px green solid;
        margin: auto;
        margin-top: 10px;
        perspective: 300px;
      }
    </style>
  </head>
  <body>
    <div class="parentBox">
      <div class="box1"></div>
    </div>
  </body>
</html>

元素可以同时绕多个轴旋转，例如绕X轴旋转30度，绕Y轴旋转30度。

Untitled 4.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0" />
    <title>3D旋转示例1</title>

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box1 {
        width: 200px;
        height: 200px;
        background-color: red;
        transform: rotateX(30deg) rotateY(30deg);
      }
      .parentBox {
        width: 200px;
        height: 200px;
        border: 2px green solid;
        margin: auto;
        margin-top: 10px;
        perspective: 300px;
      }
    </style>
  </head>
  <body>
    <div class="parentBox">
      <div class="box1"></div>
    </div>
  </body>
</html>

空间位移

当元素发生 3D旋转后，就可以进行空间位移。注意一定要是发生旋转后，才可以看出位移效果，否则就和2D平面位移没啥区别了。

用 translateX()、 translateY()、translateZ() 给 transform 赋值，就可以分别发生三个方向X轴，Y轴，Z轴方向的移动。三个位移函数接收参数支持长度单位。

语法

// 发生3D旋转后， 才能看出3D效果
// 可以同时发生多个方向位移
transform: rotateX(30deg) translateX(30px) translateY(30px);

举例

一个元素，在X轴方向发生30px距离的位移，在Y轴方向发生30px的位移。效果如下

Untitled 5.png 文章来源地址https://www.toymoban.com/news/detail-681260.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>空间位移</title>
    <style>
      p {
        width: 200px;
        height: 200px;
        background-color: orange;
      }
      .box1 {
        width: 202px;
        height: 202px;
        border: 1px solid black;
        perspective: 300px;
      }

      .box1 p {
        transform: rotateX(30deg) translateX(30px) translateY(30px);
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <p></p>
    </div>
  </body>
</html>

到了这里，关于CSS基础-3D变形的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！