CSS 如何设置3D元素的基准位置

CSS已经发展成为一种强大的语言，可以创建复杂和精美的布局和设计。CSS最令人兴奋的功能之一就是在网页上创建3D元素。通过使用CSS 3D变换，我们现在可以创建以前只能通过JavaScript或Flash实现的吸引人的3D效果。在本文中，我们将看看如何使用CSS设置3D元素的基准位置。我们还将探讨CSS 3D变换的基础知识以及如何使用它们创建一个简单的3D元素。

什么是CSS 3D变换

CSS 3D变换是一组CSS属性，允许我们以三维方式操作元素。包括旋转、平移、缩放和倾斜。这些变换可以应用于网页上的任何元素，包括文本、图像，甚至整个页面的部分。

语法

<style>
transform: rotate(angle);
</style>

在这里，“angle”是要应用于元素的旋转量，以度为单位指定。

在3D CSS中什么是基准放置

首先让我们理解什么是基准放置。在3D CSS中，基准放置是指3D元素相对于视口的位置和方向。

默认情况下，3D元素固定在视口的中心，并直接面向观察者。我们可以通过调整3D元素的基准放置来创建不同的视角或方向。例如，我们可以通过调整基准放置将3D对象移近观察者，或者将其倾斜以创建更具动态效果。

如何在3D CSS中设置基准放置

现在，让我们探讨如何在CSS中设置它。有几种不同的属性可以用来调整基准放置 –

使用transform-origin属性

transform-origin属性允许我们设置变换的原点，这可以影响3D元素的基准放置。默认情况下，transform-origin设置为元素的中心，但是我们可以使用transform-origin属性来改变原点。

例如，如果我们想将3D对象移近观察者，我们可以将transform-origin设置为靠近对象前部的点。

示例1：使用transform-origin属性

在这个示例中，我们使用transform-origin属性来调整3D盒子的基准放置。我们还设置了容器的透视为1000px，这控制了观察者相对于3D元素的位置。transform属性使盒子沿Y和X轴旋转，使其具有倾斜的外观。

值50%和50%指的是盒子的中心，-100px的值将原点设置在盒子中心后面100像素处。这会产生将盒子移近观察者并创建更具动态效果的效果。

<!DOCTYPE html>
<html>
<head>
   <style>
      body { text-align: center; }
      .container { perspective: 1000px; }
      .box {
         width: 200px;
         height: 200px;
         background-color: green;
         transform: rotateY(45deg) rotateX(45deg);
         transform-origin: 50% 50% -100px;
         transform-style: preserve-3d;
      }
   </style>
</head>
   <body>
      <h3>Setting the base placement using the transform-origin property</h3><br><br>
      <div class="container">
         <div class="box"></div>
      </div>
   </body>
</html>

使用perspective和transform-style属性

perspective属性 控制3D元素被查看的透视。默认情况下，透视被设置为1000像素，这意味着视觉者与元素间隔1000像素。

我们可以通过调整透视值来改变视觉者的位置，为元素创建不同的基础摆放。例如，将透视值设置为较小的数值可以通过使元素看起来更大和更接近视觉者来产生更戏剧化的效果。

transform-style属性 控制嵌套3D元素的渲染方式。默认情况下，嵌套的3D元素继承其父元素的基础摆放，但我们可以通过将transform-style属性设置为”preserve-3d”来改变这一点。

当我们将transform-style设置为”preserve-3d”时，嵌套的3D元素将保留其自己的基础摆放和方向，使我们能够创建更复杂的3D效果。

示例2：使用透视和变换创建一个3D立方体

在这个示例中，我们首先创建一个带有”class”为”cube”的容器元素，并设置其宽度、高度、位置、transform-style和perspective属性。我们还创建了六个带有”class”为”face”的子元素，每个代表立方体的一个面。我们设置它们的宽度、高度、背景颜色和边框属性。

然后，我们通过设置每个面元素的transform属性来正确地在3D空间中定位。例如，前面的面通过使用translateZ属性将其定位在距视觉者100像素的位置，后面的面沿着y轴旋转180度并定位在距视觉者100像素的位置，右面的面沿着y轴旋转90度并定位在距视觉者100像素的位置。

<!DOCTYPE html>
<html>
<head>
   <style>
      h3 { text-align: center;}
      .cube {
         margin: auto;
         width: 200px;
         height: 200px;
         position: relative;
         transform-style: preserve-3d;
         perspective: 1000px;
      }
      .face {
         position: absolute;
         width: 200px;
         height: 200px;
         background-color: rgba(0, 153, 255, 0.5);
         border: 2px solid white;
      }
      .front {transform: translateZ(100px); }
      .back { transform: rotateY(180deg) translateZ(100px); background-color: black; }
      .right {transform: rotateY(90deg) translateZ(100px); background-color: red;}
      .left { transform: rotateY(-90deg) translateZ(100px); background-color: green;}
      .top {transform: rotateX(90deg) translateZ(100px); background-color: yellow; }
      .bottom { transform: rotateX(-90deg) translateZ(100px); background-color: blue; }
   </style>
</head>
   <body>
      <h3>Setting the base placement using the transform-origin property</h3><br>
      <div class="cube">
         <div class="face front"></div>
         <div class="face back"></div>
         <div class="face right"></div>
         <div class="face left"></div>
         <div class="face top"></div>
         <div class="face bottom"></div>
      </div>
   </body>
</html>