CSS 3D世界,360°旋转水晶魔方

1,183 阅读3分钟

「这是我参与11月更文挑战的第8天,活动详情查看:2021最后一次更文挑战

你家有类似的水晶魔方吗?我第一次见到它的时候,就觉得这个东西真不错,所以我家现在有2个。不过一个已经坏掉了,坐车放在箱子里面,颠簸导致水晶的四个角都破损了,大家如果要携带一定要小心哦。

20200609094256.png

现在我们来制作一个永远不会破损的水晶魔方,用代码实现,要不代码出bug,永远不坏。

CSS3实现水晶魔方效果。

结构

水晶是一个正方体,所以有6个面,用html表示如下:

<ul class="cube-inner">
  <li class="top"></li>
  <li class="bottom"></li>
  <li class="left"></li>
  <li class="right"></li>
  <li class="front"></li>
  <li class="back"></li>
</ul>

逐个击破

每个面都是一个正方形,所以我们对6个面用统一样式

.cube-inner {
  position: relative;
  margin: 200px auto;
  width: 100px;
}
.cube-inner li {
  position: absolute;
  display: block;
  width: 100px;
  height: 100px;
  background: red;
}

20200609100246.png

这样每个6个面都重叠在一起了,我们用transform,改变每个面的在空间上的位置。

在设置每个面之前,我们先使其整个魔方元素在3D空间呈现(transform-style: preserve-3d ),并旋转一下,看起来更方便。

.cube-inner {
  position: relative;
  margin: 200px auto;
  width: 100px;
  transform-style: preserve-3d;
  transform: rotateX(-33.5deg) rotateY(45deg);
}

20200609101245.png

正面

.cube-inner .front {
  transform: translateZ(50px);
  background: blue;
}

20200609140958.png

上面

.cube-inner .top {
  transform: rotateX(90deg) translateZ(50px);
  background: green;
}

20200609141108.png

下面

.cube-inner .bottom {
  transform: rotateX(-90deg) translateZ(50px);
  background: yellow;
}

20200609141445.png

隐藏掉正面,才可以看清楚下方和右边

右边

.cube-inner .right {
  transform: rotateY(90deg) translateZ(50px);
  background: pink;
}

后面

.cube-inner .back {
  transform: rotateX(-180deg) translateZ(50px);
  background: orange;
}

20200609141822.png

左面

.cube-inner .left {
  transform: rotateY(-90deg) translateZ(50px);
}

20200609141930.png

OK,下面我们让整个立方体动起来

动画

.cube-inner {
  ...
  animation: fastspin 6s ease-in-out infinite 2s;
}
@keyframes fastspin {
  0% {
    transform: rotateX(-33.5deg) rotateY(45deg) rotateZ(0deg);
  }
  40%{
    transform: rotateX(-33.5deg) rotateY(-315deg) rotateZ(100deg);
  }
  to {
    transform: rotateX(-33.5deg) rotateY(-315deg) rotateZ(0deg);
  }
}

1.gif

接下来把每个面背景都换成自己喜欢的照片,试试看。

.cube-inner li{
  ...
  background-size: 100% auto;
  opacity: 0.8;
}
.cube-inner .front {
  ...
  background: url('./b1.jpg') no-repeat;
}
.cube-inner .top {
  ...
  background: url('./b2.jpg') no-repeat;
}
.cube-inner .bottom {
  ...
  background: url('./b3.jpg') no-repeat;
}
.cube-inner .right {
  ...
  background: url('./b4.jpg') no-repeat;
}
.cube-inner .left {
  ...
  background: url('./b5.jpg') no-repeat;
}
.cube-inner .back {
  ...
  background: url('./b6.jpg') no-repeat;
  
}

2.gif

设置opacity透明度,主要是为了看起来具有水晶透明效果,至于具体动画怎么做,就看大家自己喜好喽。

小结

本小结知识:

1、transform-style: preserve-3d 元素3D呈现

2、transform

  • rotateX(angle) 定义沿着 X 轴的 3D 旋转。
  • rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
  • rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
  • translateX(x) X 轴平移。
  • translateY(y) Y 轴平移。
  • translateZ(z) Z 轴平移。

3、animation 动画

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

  • animation-name 规定 @keyframes 动画的名称。
  • animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
  • animation-timing-function 规定动画的速度曲线
  • animation-fill-mode 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
  • animation-delay 规定动画何时开始(延时多少s后执行)
  • animation-iteration-count 规定动画被播放的次数
  • animation-direction 规定动画是否在下一周期逆向地播放
  • animation-play-state 规定动画是否正在运行或暂停(通常控制动画是否运行或暂停)

关注我,学习更多编程知识哦,不仅仅是前端!

小伙伴们,有问题可以评论区留言哦,欢迎大家点评。

谢谢大家一直以来的支持。