其他分享
首页 > 其他分享> > HTML+CSS写一个3D立方体

HTML+CSS写一个3D立方体

作者:互联网

相信有许多的朋友在学3D转换的时候很懵,或者学完之后想做个小练习获得成就感鼓励自己,再或者想更理解透彻。做完这小练习相信大家一定会有所收获。废话不多说了,直接开始:

构建基本架构

HTML代码:

<div class="preserve">
  <div class="front">前</div>
  <div class="back">后</div>
  <div class="top">上</div>
  <div class="bottom">下</div>
  <div class="left">左</div>
  <div class="right">右</div>
</div>

相信大家玩过魔方以及在小学的时候学过立方体展开,上面代码都能理解。

添加CSS样式

.preserve>div{
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  position: absolute;
}
.preserve {
  width: 200px;
  height: 200px;
  position: relative;
  top:300px;
  left:300px;
  transform-style: preserve-3d;
  transform: rotateX(-25deg) rotateY(-25deg);
}

这里主要是使用transform-style允许子元素以3D方式显示,transform调整立方体角度方便能更清楚看懂后续操作。

.front{
  background: red;
  transform: translateZ(100px);
}

大多数玩魔方的朋友都有拆过魔方,一共有三根轴并相交一个点。我们把面对到后面的那跟轴线称为Z轴,左边到右边称为X轴,上边到下边的称为Y轴,轴相交的点称为交点。最初始状态六个面是在这个点上。
这里主要是将一个面在Z轴上,向着你眼睛的方向(离你越来越近)移动200像素。

.back{
  background: greenyellow;
  transform: translateZ(-100px);
}
.top{
  background: yellow;
  transform: rotateX(90deg) translateZ(100px);
}

这里是对立方体顶部的操作,大家可以把收放在面前,掌心对着自己,现在是就是板块的初始状态。transform的第一个值是将板块围绕着X轴旋转90°,相当于手掌的上边向后倒90°,第二个值是板块沿着Z轴运动200像素,相当于手掌向上运动一段距离。相信大家很疑惑,为什么是沿着Z轴不应该是Y轴吗。其实每个板块都是有自己的轴线,当我们对板块旋转时,自身的轴线也跟着旋转。

.bottom{
  background: violet;
  transform: rotateX(270deg) translateZ(100px);
}
.left{
  background: #4dd3;
  transform: rotateY(270deg) translateZ(100px);
}
.right{
      background: #a53952;
      transform: rotateY(90deg) translateZ(100px);
}

完毕

标签:translateZ,100px,transform,HTML,background,立方体,200px,CSS,3D
来源: https://www.cnblogs.com/lirenye/p/15793396.html