How to realize the dynamic Picture of Cube rotation luminous effect by css3
This article introduces the relevant knowledge of "how to achieve the cube rotation luminous effect by css3". In the operation of actual cases, many people will encounter such a dilemma. Then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!
CSS3 3D cube rotating glowing animation special effects
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)
}
}
This is the end of the content of "how to achieve the glowing effect of cube rotation by css3". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!
