css记录:三维变换之transform

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 变换的注意事项

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

示例

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

html 复制代码
<!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 动画,整个立方体可以平滑地旋转。

相关推荐
爱生活的苏苏3 分钟前
vue生成二维码图片+文字说明
前端·vue.js
拉不动的猪5 分钟前
安卓和ios小程序开发中的兼容性问题举例
前端·javascript·面试
炫彩@之星11 分钟前
Chrome书签的导出与导入:步骤图
前端·chrome
贩卖纯净水.22 分钟前
浏览器兼容-polyfill-本地服务-优化
开发语言·前端·javascript
前端百草阁27 分钟前
从npm库 Vue 组件到独立SDK:打包与 CDN 引入的最佳实践
前端·vue.js·npm
夏日米米茶28 分钟前
Windows系统下npm报错node-gyp configure got “gyp ERR“解决方法
前端·windows·npm
且白1 小时前
vsCode使用本地低版本node启动配置文件
前端·vue.js·vscode·编辑器
程序研1 小时前
一、ES6-let声明变量【解刨分析最详细】
前端·javascript·es6
siwangqishiq21 小时前
Vulkan Tutorial 教程翻译(四) 绘制三角形 2.2 呈现
前端
李三岁_foucsli1 小时前
js中消息队列和事件循环到底是怎么个事,宏任务和微任务还存在吗?
前端·chrome