html立方体旋转展开,css3技术设计立方体旋转发光效果动图

CSS3 3D立方体旋转发光动画特效

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);

}

}