如何使用CSS3实现的科技球体旋转动画特效
这篇文章主要为大家展示了“如何使用CSS3实现的科技球体旋转动画特效”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用CSS3实现的科技球体旋转动画特效”这篇文章吧。
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;
-webkit-transform: translateZ(-2em);
transform: translateZ(-2em);
box-shadow: inset 0 0 1em, 0 0 1em;
color: teal;
}
.side--back {
-webkit-transform: translateZ(-5em) rotateY(180deg);
transform: translateZ(-5em) rotateY(180deg);
}
.side--left {
-webkit-transform: translateX(-5em) rotateY(-90deg);
transform: translateX(-5em) rotateY(-90deg);
}
.side--right {
-webkit-transform: translateX(5em) rotateY(90deg);
transform: translateX(5em) rotateY(90deg);
}
.side--top {
-webkit-transform: translateY(-5em) rotateX(90deg);
transform: translateY(-5em) rotateX(90deg);
}
.side--bottom {
-webkit-transform: translateY(5em) rotateX(-90deg);
transform: translateY(5em) rotateX(-90deg);
}
.side--front {
-webkit-transform: translateZ(5em);
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;
-webkit-transform: translateZ(2em);
transform: translateZ(2em);
-webkit-transform-style: preserve-3d;
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;
-webkit-transform: translateZ(2em);
transform: translateZ(2em);
color: crimson;
}
.side__inner::after {
width: 1.5em;
height: 1.5em;
-webkit-transform: translateZ(4em);
transform: translateZ(4em);
color: purple;
}
@-webkit-keyframes rotate {
100% {
-webkit-transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
}
}
@keyframes rotate {
100% {
-webkit-transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
}
}
HTML, BODY {
height: 100%;
}
BODY {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
</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>
以上是“如何使用CSS3实现的科技球体旋转动画特效”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
