css3怎么实现立方体旋转发光效果动图

本篇内容介绍了“css3怎么实现立方体旋转发光效果动图”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

立方体旋转发光动画特效

body {

margin: 0;

overflow: hidden;

width: 100vw;

height: 100vh;

background: #222;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

}

.world {

-webkit-perspective: 800px;

perspective: 800px;

width: 100vh;

height: 100vh;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

}

.cube {

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

width: 50vh;

height: 50vh;

position: relative;

-webkit-animation: rotator 4.5s linear infinite;

animation: rotator 4.5s linear infinite;

outline: 0;

}

.cube * {

background: #000;

box-shadow: 0 0 3vh currentColor;

-webkit-transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out;

transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out;

}

.cube:hover * {

background: currentColor;

box-shadow: 0 0 20vh currentColor;

}

.cube .cube__front {

color: deeppink;

-webkit-transform: translateZ(25vh);

transform: translateZ(25vh);

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

.cube .cube__right {

color: lightcoral;

-webkit-transform: rotateY(90deg) translateZ(25vh);

transform: rotateY(90deg) translateZ(25vh);

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

.cube .cube__left {

color: skyblue;

-webkit-transform: rotateY(270deg) translateZ(25vh);

transform: rotateY(270deg) translateZ(25vh);

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

.cube .cube__back {

color: seagreen;

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

-webkit-transform: rotateY(180deg) translateZ(25vh);

transform: rotateY(180deg) translateZ(25vh);

}

.cube .cube__top {

color: mediumseagreen;

-webkit-transform: rotateX(90deg) translateZ(25vh);

transform: rotateX(90deg) translateZ(25vh);

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

.cube .cube__bottom {

color: dodgerblue;

-webkit-transform: rotateX(270deg) translateZ(25vh);

transform: rotateX(270deg) translateZ(25vh);

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

@-webkit-keyframes rotator {

0% {

-webkit-transform: rotateX(0deg) 免费云主机、域名rotateY(0deg);

transform: rotateX(0deg) rotateY(0deg);

}

100% {

-webkit-transform: rotateX(360deg) rotateY(360deg);

transform: rotateX(360deg) rotateY(360deg);

}

}

@keyframes rotator {

0% {

-webkit-transform: rotateX(0deg) rotateY(0deg);

transform: rotateX(0deg) rotateY(0deg);

}

100% {

-webkit-transform: rotateX(360deg) rotateY(360deg);

transform: rotateX(360deg) rotateY(360deg);

}

}

“css3怎么实现立方体旋转发光效果动图”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注云技术网站，小编将为大家输出更多高质量的实用文章！

相关推荐: 怎么用css制作炫酷的3D文字特效

本篇内容主要讲解“怎么用css制作炫酷的3D文字特效”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用css制作炫酷的3D文字特效”吧! 这是一种很有意思的技巧，当然，制作的过程需要比较多的调试。合理的利用距离、…