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

This article mainly introduces how to use pure CSS3 to make 3D online celebrity hot word box, which has a certain reference value. Interested friends can refer to it. I hope you will gain a lot after reading this article. Let's take a look at it.

HTML Code:

Drive him.

Lemon essence

OMG

It's too hard for me.

nine hundred and ninety six

I believe you, ghost.

CSS3 Code:

# effect-3d-box {

Position: relative

Margin: auto

Margin-top: 80px

Margin-bottom: 80px

Width: 100px

Height: 100px

Transform-style: preserve-3d

-webkit-transform-style: preserve-3d

-moz-transform-style: preserve-3d

Animation: rotate 20s linear 0s infinite

-webkit-animation: rotate 20s linear 0s infinite

}

# effect-3d-box > .area {

Position: absolute

Display: flex

Flex-flow: row nowrap

Align-items: center

Justify-content: center

Top: 0

Left: 0

Width: 100px

Height: 100px

Background-color: # e74c3c

Color: white

}

# effect-3d-box > .area:nth-child (2) {

Transform: translateZ (- 100px) rotateX (180deg)

-webkit-transform: translateZ (- 100px) rotateX (180deg)

-moz-transform: translateZ (- 100px) rotateX (180deg)

-ms-transform: translateZ (- 100px) rotateX (180deg)

-o-transform: translateZ (- 100px) rotateX (180deg)

Background-color: # e67e22

}

# effect-3d-box > .area:nth-child (3) {

Transform: rotateX (- 90deg)

-webkit-transform: rotateX (- 90deg)

-moz-transform: rotateX (- 90deg)

-ms-transform: rotateX (- 90deg)

-o-transform: rotateX (- 90deg)

Transform-origin: 50% 000

Background-color: # f1c40f

}

# effect-3d-box > .area:nth-child (4) {

Transform: rotateX (90deg) rotateY (180deg)

-webkit-transform: rotateX (90deg) rotateY (180deg)

-moz-transform: rotateX (90deg) rotateY (180deg)

-ms-transform: rotateX (90deg) rotateY (180deg)

-o-transform: rotateX (90deg) rotateY (180deg)

Transform-origin: 50% / 100%

Background-color: # 2ecc71

}

# effect-3d-box > .area:nth-child (5) {

Transform: rotateY (90deg) rotateX (180deg)

-webkit-transform: rotateY (90deg) rotateX (180deg)

-moz-transform: rotateY (90deg) rotateX (180deg)

-ms-transform: rotateY (90deg) rotateX (180deg)

-o-transform: rotateY (90deg) rotateX (180deg)

Transform-origin: 0 50% 0

Background-color: # 3498db

}

# effect-3d-box > .area:nth-child (6) {

Transform: rotateY (- 90deg) rotateX (180deg)

-webkit-transform: rotateY (- 90deg) rotateX (180deg)

-moz-transform: rotateY (- 90deg) rotateX (180deg)

-ms-transform: rotateY (- 90deg) rotateX (180deg)

-o-transform: rotateY (- 90deg) rotateX (180deg)

Transform-origin: 100% 50%

Background-color: # 9b59b6

}

@ keyframes rotate {

From {

Transform: rotateX (0deg) rotateY (0deg) rotateZ (0deg)

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

-moz-transform: rotateX (0deg) rotateY (0deg) rotateZ (0deg)

-ms-transform: rotateX (0deg) rotateY (0deg) rotateZ (0deg)

-o-transform: rotateX (0deg) rotateY (0deg) rotateZ (0deg)

}

To {

Transform: rotateX (360deg) rotateY (720deg) rotateZ (1080deg)

-webkit-transform: rotateX (360deg) rotateY (720deg) rotateZ (1080deg)

-moz-transform: rotateX (360deg) rotateY (720deg) rotateZ (1080deg)

-ms-transform: rotateX (360deg) rotateY (720deg) rotateZ (1080deg)

-o-transform: rotateX (360deg) rotateY (720deg) rotateZ (1080deg)

}

}

Thank you for reading this article carefully. I hope the article "how to use pure CSS3 to make a 3D online celebrity hot word box" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.