一文掌握 CSS3 transform 3D转换（附代码示例）

瑶琴AI前端

已于 2024-05-14 09:51:21 修改

阅读量746

点赞数 13

分类专栏： CSS 文章标签： css3 前端 css

于 2024-05-13 09:49:10 首次发布

本文链接：https://blog.csdn.net/weixin_40348267/article/details/138787195

版权

CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 CSS 的部分，瑶琴会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。

CSS3中的 transform 属性不仅支持 2D 转换，还支持 3D转换，transform 3D 转换能让网页实现更加酷炫的效果，能够在三维空间中操作元素，跟 2D 转换一样，有平移、旋转、缩放、倾斜 4 种转换方式。今天瑶琴带大家来学习或复习这个知识点。

transform 属性有 2D 和 3D 两种转换，本篇介绍 transform 3D转换的属性。

1.3D平移（Translate）

3D平移可以在三维空间中移动元素的位置。使用 translate3d 函数可以指定元素在 X、Y 和 Z 轴上的位移。示例如下：

.element {
  transform: translate3d(50px, 20px, 30px);
}

使元素在 X轴上向右平移 50 像素，Y 轴上向下平移 20 像素，Z 轴上向前平移 30 像素

2. 3D旋转（Rotate）

3D 旋转使用 rotate3d 函数在三维空间中旋转元素,可以指定绕任意轴的旋转角度。例如：

/* 绕X轴旋转30度 */
.element {
  transform: rotate3d(1, 0, 0, 30deg);
}

这将使元素绕 X 轴旋转 30 度。还可以通过更改 rotate3d 函数中的参数来绕 Y 轴或 Z 轴进行旋转。

3. 3D缩放（Scale）

3D 缩放使用 scale3d 函数在三维空间中缩放元素。可以指定在 X、Y和Z轴上的缩放比例。例如：

/* 在X、Y和Z轴上各放大1.5倍 */
.element {
  transform: scale3d(1.5, 1.5, 1.5);
}

这使元素在三个轴上等比例放大 1.5 倍。

4. 3D倾斜（Skew）

3D 倾斜使用 skew3d 函数在三维空间中倾斜元素。可以指定绕任意轴的倾斜角度。例如：

/* 绕Y轴倾斜30度 */
.element {
  transform: skew3d(0, 1, 0, 30deg);
}

元素绕 Y 轴倾斜 30 度。同样，可以通过更改函数中的参数来绕其他轴进行倾斜

以下是一个使用 3D 转换的 HTML 和 CSS 示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      perspective: 800px; /* 设定透视视角 */
      width: 200px;
      height: 200px;
      margin: 100px auto;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: #3498db;
      transform-style: preserve-3d; /* 保留子元素的3D效果 */
      animation: rotate 5s infinite linear; /* 添加旋转动画 */
    }

    @keyframes rotate {
      0% {
        transform: rotateY(0deg);
      }
      100% {
        transform: rotateY(360deg);
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
</body>
</html>

这个示例中，创建了一个 3D容器（.container）和一个 3D盒子（.box）。通过使用 perspective 属性，为容器创建了一个透视视角，让容器内的 3D 变换效果更明显。盒子通过 transform-style: preserve-3d ;属性来保留其子元素的 3D 效果。

给元素盒子 .box 添加了一个旋转动画，让盒子在 Y 轴上无限旋转，可以看到 3D 效果。在浏览器中运这个示例，可以看到盒子以立体的方式旋转。

以上就是 CSS3 中关于 transform 3D 转换的知识点，上面的示例，初学者可以粘贴到 HTML 文件中并在浏览器中运行，以查看不同的转换效果。

希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师，加油。

最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。

瑶琴AI前端

关注

13
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
一文掌握 CSS3 transform 3D转换（附代码示例）

CSS3中的 transform 属性不仅支持 2D 转换，还支持 3D转换，transform 3D 转换能让网页实现更加酷炫的效果，能够在三维空间中操作元素，跟 2D 转换一样，有平移、旋转、缩放、倾斜 4 种转换方式。今天瑶琴带大家来学习或复习这个知识点。transform 属性有 2D 和 3D 两种转换，本篇介绍 transform 3D转换的属性。
复制链接

扫一扫