css记录：三维变换之transform

红衣大叔

于 2024-06-19 09:58:25 发布

阅读量830

点赞数 34

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

本文链接：https://blog.csdn.net/gusushantang/article/details/139794218

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS 的 transform 属性用于对元素进行 2D 或 3D 转换。这些转换包括旋转、缩放、倾斜和移动等。在 3D 变换中，我们可以创建更为复杂和动态的效果，让用户体验更为丰富。

transform 属性

transform 是一个简写属性，用于设置以下 2D 和 3D 转换函数：

rotate()：2D 旋转
rotateX()、rotateY()、rotateZ() 或 rotate3d()：3D 旋转
scale()：2D 缩放
scaleX()、scaleY()、scaleZ() 或 scale3d()：3D 缩放
skew()：2D 倾斜
skewX()、skewY()：3D 倾斜（但注意，skewZ() 实际上不会创建 3D 效果，因为它只是沿着 Z 轴倾斜元素，但这在 2D 渲染中是不可见的）
translate()：2D 位移
translateX()、translateY()、translateZ() 或 translate3d()：3D 位移
matrix()：定义 2D 转换，使用六个值的矩阵
matrix3d()：定义 3D 转换，使用 16 个值的 4x4 矩阵

3D 变换的注意事项

透视 (perspective)：为了看到 3D 效果，需要设置元素的透视值。这可以通过在其父元素上设置 perspective 属性来实现。透视值定义了观察者与 Z=0 平面的距离，使元素具有 3D 空间感。
转换样式 (transform-style)：当元素有子元素并希望这些子元素也在 3D 空间中转换时，需要将父元素的 transform-style 设置为 preserve-3d。
反面可见性 (backface-visibility)：默认情况下，当元素旋转到其背面时，该背面是不可见的。可以通过设置 backface-visibility: visible; 来使其可见。

示例

下面是一个简单的 3D 立方体示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Cube</title>
<style>
  .cube {
    position: relative;
    width: 200px;
    transform-style: preserve-3d;
    animation: spin 5s infinite linear;
  }

  .face {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
    background-color: rgba(255,255,255,0.8);
  }

  .front  { transform: translateZ(100px); }
  .back   { transform: rotateY(180deg) translateZ(100px); }
  .left   { transform: rotateY(-90deg) translateZ(100px); }
  .right  { transform: rotateY(90deg) translateZ(100px); }
  .top    { transform: rotateX(90deg) translateZ(100px); }
  .bottom { transform: rotateX(-90deg) translateZ(100px); }

  @keyframes spin {
    from { transform: rotateY(0deg); }
    to   { transform: rotateY(1turn); }
  }
</style>
</head>
<body>

<div class="cube">
  <div class="face front">Front</div>
  <div class="face back">Back</div>
  <div class="face left">Left</div>
  <div class="face right">Right</div>
  <div class="face top">Top</div>
  <div class="face bottom">Bottom</div>
</div>

</body>
</html>

这个示例创建了一个旋转的 3D 立方体。每个面都是一个 div 元素，并使用 CSS 转换定位在 3D 空间中。通过 @keyframes 动画，整个立方体可以平滑地旋转。

红衣大叔

关注

34
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
css记录：三维变换之transform

CSS 的transform属性用于对元素进行 2D 或 3D 转换。这些转换包括旋转、缩放、倾斜和移动等。在 3D 变换中，我们可以创建更为复杂和动态的效果，让用户体验更为丰富。
复制链接

扫一扫