在CSS交流网站上看到了这个效果,在赞叹别人伟大的同时自己也想动手试一试,的确是一个十分花哨的效果,主要考察的是 transform 的运用。 让我们一起来揭秘它吧!
当我写到一半的时候,问题也就随之而来了。我的大盒子在每一次旋转之后会闪烁一次,拉低了整体效果。我在百度上找到了这样一则信息,感谢提供此信息的博友。 原文链接 大意是说:父元素的transform-style: preserve-3d;子元素并未继承,当子元素被添加进去时,父元素就会强制闪烁一次,这样4个子元素绕一周,父元素转一圈会闪烁4次。
gif 看不真切,大家可以把代码考下去测试一下,或者直接拉到文章底部,把我调试好的代码拿走,感谢浏览!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>球球</title>
<style>
*{margin: 0;
padding: 0;}
html,body{
width: 100vw;
height: 100vh;
}
body{
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
background: url(http://5b0988e595225.cdn.sohucs.com/images/20181219/f00e5f8f4b3d43f0bf97a3e0ca289080.jpeg) repeat center;
}
@keyframes rotate {
100% {transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);}
}
.container {
width: 10em;
height: 10em;
transform-style: preserve-3d;
animation: rotate 12s infinite linear;
}
.cube {
position: absolute;
width: 10em;
height: 10em;
transform-style: preserve-3d;
}
.cube--2 {
transform: rotateX(45deg) rotateY(45deg);
}
.cube--3 {
transform: rotateX(45deg) rotateZ(45deg);
}
.side {
position: absolute;
width: 10em;
height: 10em;
border: 2px dotted rgba(255, 213, 0, 0.35);
border-radius: 50%;
transform-style: preserve-3d;
transform: rotateY(180deg);
}
.side::before, .side::after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
box-sizing: border-box;
border-radius: inherit;
border: 1px solid;
box-shadow: inset 0 0 2em, 0 0 2em;
}
.side::before {
width: 2.5em;
height: 2.5em;
color: gold;
}
.side::after {
width: 1.5em;
height: 1.5em;
transform: translateZ(-2em);
box-shadow: inset 0 0 1em, 0 0 1em;
color: teal;
}
.side--back {
transform: translateZ(-5em) rotateY(180deg);
}
.side--left {
transform: translateX(-5em) rotateY(-90deg);
}
.side--right {
transform: translateX(5em) rotateY(90deg);
}
.side--top {
transform: translateY(-5em) rotateX(90deg);
}
.side--bottom {
transform: translateY(5em) rotateX(-90deg);
}
.side--front {
transform: translateZ(5em);
}
</style>
</head>
<body>
<div class="container">
<div class="cube cube--1">
<div class="side side--back"></div>
<div class="side side--left"></div>
<div class="side side--right"></div>
<div class="side side--top"></div>
<div class="side side--bottom"></div>
<div class="side side--front"></div>
</div>
</div>
</body>
</html>
虽然效果不佳,但就此收手的话一定非常惋惜,我抱着玩一玩的心态把它进行到了最后一刻,随着我数量的添加,bug 开始不那么明显了。虽然不是一个正规途径,但却十分有效,即达到了预期效果,又没有冗余的代码,只是:问题的解决方案依旧是个谜题,希望有高深造诣的博友能给我解决措施,我也会一直寻找答案,祝福你我!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>球球</title>
<style>
html,body{
height: 100%;
}
body{
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
background: url(http://5b0988e595225.cdn.sohucs.com/images/20181219/f00e5f8f4b3d43f0bf97a3e0ca289080.jpeg) repeat center;
}
.container {
width: 10em;
height: 10em;
transform-style: preserve-3d;
animation: rotate 10s infinite linear;
}
.cube {
position: absolute;
width: 10em;
height: 10em;
transform-style: preserve-3d;
}
.cube--2 {
transform: rotateX(45deg) rotateY(45deg);
}
.cube--3 {
transform: rotateX(45deg) rotateZ(45deg);
}
.side {
position: absolute;
width: 10em;
height: 10em;
border: 2px dotted rgba(255, 213, 0, 0.35);
border-radius: 50%;
transform-style: preserve-3d;
transform: rotateY(180deg);
}
.side::before, .side::after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
box-sizing: border-box;
border-radius: inherit;
border: 1px solid;
box-shadow: inset 0 0 2em, 0 0 2em;
}
.side::before {
width: 2.5em;
height: 2.5em;
color: gold;
}
.side::after {
width: 1.5em;
height: 1.5em;
transform: translateZ(-2em);
box-shadow: inset 0 0 1em, 0 0 1em;
color: teal;
}
.side--back {
transform: translateZ(-5em) rotateY(180deg);
}
.side--left {
transform: translateX(-5em) rotateY(-90deg);
}
.side--right {
transform: translateX(5em) rotateY(90deg);
}
.side--top {
transform: translateY(-5em) rotateX(90deg);
}
.side--bottom {
transform: translateY(5em) rotateX(-90deg);
}
.side--front {
transform: translateZ(5em);
}
.side__inner {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 5em;
height: 5em;
margin: auto;
border-radius: inherit;
border: 1px solid;
box-shadow: inset 0 0 2em;
color: orangered;
transform: translateZ(2em);
transform-style: preserve-3d;
}
.side__inner::before, .side__inner::after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
box-sizing: border-box;
border-radius: inherit;
border: 1px solid;
box-shadow: inset 0 0 2em, 0 0 2em;
}
.side__inner::before {
width: 2.5em;
height: 2.5em;
transform: translateZ(2em);
color: crimson;
}
.side__inner::after {
width: 1.5em;
height: 1.5em;
transform: translateZ(4em);
color: purple;
}
@keyframes rotate {
100% {transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);}
}
</style>
</head>
<body>
<div class="container">
<div class="cube cube--1">
<div class="side side--back">
<div class="side__inner"></div>
</div>
<div class="side side--left">
<div class="side__inner"></div>
</div>
<div class="side side--right">
<div class="side__inner"></div>
</div>
<div class="side side--top">
<div class="side__inner"></div>
</div>
<div class="side side--bottom">
<div class="side__inner"></div>
</div>
<div class="side side--front">
<div class="side__inner"></div>
</div>
</div>
<div class="cube cube--2">
<div class="side side--back">
<div class="side__inner"></div>
</div>
<div class="side side--left">
<div class="side__inner"></div>
</div>
<div class="side side--right">
<div class="side__inner"></div>
</div>
<div class="side side--top">
<div class="side__inner"></div>
</div>
<div class="side side--bottom">
<div class="side__inner"></div>
</div>
<div class="side side--front">
<div class="side__inner"></div>
</div>
</div>
<div class="cube cube--3">
<div class="side side--back">
<div class="side__inner"></div>
</div>
<div class="side side--left">
<div class="side__inner"></div>
</div>
<div class="side side--right">
<div class="side__inner"></div>
</div>
<div class="side side--top">
<div class="side__inner"></div>
</div>
<div class="side side--bottom">
<div class="side__inner"></div>
</div>
<div class="side side--front">
<div class="side__inner"></div>
</div>
</div>
</div>
</body>
</html>
可以看到效果被稍稍改善了一些,但细心的话仍可以看出缺憾,剩下的完善就留给你们吧!自学也是人生的一门必修课,如果你愿你跟我分享你的正确答案,我会洗耳恭听,并追寻你的脚步,向你看齐。
前端的学习不是一蹴而就,不积跬步无以至千里,不积小流无以成江海。持续不断的努力才能让你我有所收获,专业的知识还得到机构去学习,培训机构的设立有其存在的必然性,你钱花对了吗?
不辜负每一份真情,不嘲笑每一个正在努力的人,力所能及的对别人施以援手,每天都要强化自己,洗去铅华才能绽放光芒。