How to use pure CSS3 to make 3D online celebrity buzzwords box
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!
