3d怎么把两个面拼接在一起_0202年了，你还不会用CSS3做3D吗？-CSDN博客

本文链接：https://blog.csdn.net/weixin_26798991/article/details/112116674

是新朋友吗？记得先点蓝字关注我哦～

什么是CSS？

CSS是Cascading Style Sheets的简称，国内一般翻译为“层叠样式表”，是负责实现html和xml标签样式的一门语言。简单来说，我们在网上看到的千姿百态的网页样式，都是用CSS来实现的。以下图为例看一下CSS的具体作用。左边是没有CSS样式的网页，右边是添加了CSS样式表的页面：

我们可看到，CSS可以令网页样式和布局千变万化，丰富多彩。但是，在CSS2的时代，网页样式的设计一直停留在平面的2D空间内，虽然有很多优秀的网页设计师通过巧妙的设计在视觉上产生类似3D的效果，但是网页布局却一直不支持3D空间的实现。而W3C在CSS2的下一代标准，CSS3里增加了实现3D效果的样式。

我们可以看一下3D立方体的轮播图：

是不是很炫酷？？这篇文章将为大家介绍如何利用CSS3实现一个3D效果的立方体。 CSS3实现立方体 首先，我们给一个div添加开启3D效果的CSS样式代码：transform-style: preserve-3d；添加了这句样式之后，这个 div 里的区域就变成了一个 3D 空间。我们可以在这个 div 里面添加任何子元素，并对子元素进行任何位置的位移和角度的转换。

<body>  <div class="box">div>body>.box{  transform-style: preserve-3d;  width: 100%;  height: 100%;}

下图的2个坐标很好的诠释了添加transform-style: preserve-3d；前后页面空间坐标的变化。再添加了3d样式后，页面从只有x,y轴的2d坐标变成了带有x，y，z三个坐标轴的3D空间。

为了形成一个立方体，我们需要写出6个宽高相等的正方形的div，并为每个面添加不同的背景色，代码如下所示：(左侧为页面效果)。

为了让这6个面通过位移和旋转拼接成一个立方体，我们需要把这6个面通过position定位重叠在一起，同时添加top，left属性让这6个div居于页面中央：

CSS3通过transform属性下的rotate和translate，可以旋转和位移html元素。为了组成立方体，我们需要让2个面沿X抽旋转90度，并且沿Y抽向不同的方向位移每个div长度的一半(此例中位移100px)。同理，还有2个面需要沿Y抽旋转90度，并且沿X抽向不同的方向位移100px。最后的2个面不需要旋转，只要沿Z抽向不同的方向位移100px。

以下是1，2两个面沿X抽旋转90度的样式代码，为了方便看到旋转效果，我们让整个.box旋转一定的角度：

然后我们让1，2两个面沿Y轴向相反的方向位移100px(每个div长宽的一半)，我们可以看到下面的效果：

同样，我们让3，4两个面沿Y抽旋转90度：

然后我们让3，4两个面沿Y轴向相反的方向位移100px，得到下面的效果：

最后，我们只要让5，6最后2个面分别沿着Z轴位移100px(每个面的宽高的一般)，就可以拼成一个正方体了。

下面我们加一些动画效果来让这个立方体动起来。我们先看一下动画效果：

下面我们看一下实现动画效果的样式代码：

.box{  transform-style: preserve-3d;  transform: rotateX(-20deg) rotateY(70deg);  animation: move 5s linear infinite;   width: 100%;  height: 100%;}@keyframes move{  0%{    transform:rotateX(0deg) rotateY(0deg);  }   50%{    transform:rotateX(180deg) rotateY(180deg);  }  100%{    transform:rotateX(360deg) rotateY(360deg);  }   }.face1{  background-color: #333;  transform: translateY(150px) rotateX(270deg);}.face2{  background-color: #111;  transform: translateY(-150px) rotateX(90deg);}.face3{  background-color: #666;  transform:translateX(150px) rotateY(90deg);}.face4{  background-color: #999;  transform:translateX(-150px) rotateY(90deg);}.face5{  background-color: #777;  transform: translateZ(150px);}.face6{  background-color: #555;  transform: translateZ(-150px);}

实现动画效果用的是CSS3的animation，关于animation的语法可以参考W3C的官网： https://www.w3school.com.cn/cssref/pr_animation.asp。

(以下截图来自W3C官网)