「这是我参与11月更文挑战的第8天,活动详情查看:2021最后一次更文挑战」
你家有类似的水晶魔方吗?我第一次见到它的时候,就觉得这个东西真不错,所以我家现在有2个。不过一个已经坏掉了,坐车放在箱子里面,颠簸导致水晶的四个角都破损了,大家如果要携带一定要小心哦。
现在我们来制作一个永远不会破损的水晶魔方,用代码实现,要不代码出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;
}
复制代码
这样每个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);
}
复制代码
正面
.cube-inner .front {
transform: translateZ(50px);
background: blue;
}
复制代码
上面
.cube-inner .top {
transform: rotateX(90deg) translateZ(50px);
background: green;
}
复制代码
下面
.cube-inner .bottom {
transform: rotateX(-90deg) translateZ(50px);
background: yellow;
}
复制代码
隐藏掉正面,才可以看清楚下方和右边
右边
.cube-inner .right {
transform: rotateY(90deg) translateZ(50px);
background: pink;
}
复制代码
后面
.cube-inner .back {
transform: rotateX(-180deg) translateZ(50px);
background: orange;
}
复制代码
左面
.cube-inner .left {
transform: rotateY(-90deg) translateZ(50px);
}
复制代码
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);
}
}
复制代码
接下来把每个面背景都换成自己喜欢的照片,试试看。
.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;
}
复制代码
设置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 规定动画是否正在运行或暂停(通常控制动画是否运行或暂停)
关注我,学习更多编程知识哦,不仅仅是前端!
小伙伴们,有问题可以评论区留言哦,欢迎大家点评。
谢谢大家一直以来的支持。