Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.