How to realize 3D Animation Special effects with css
Editor to share with you how to use css to achieve 3D animation special effects, I believe that most people do not know much, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!
Attribute
Perspective: transmission distance, unit pixel (the smaller the value, the closer the perspective distance, the more obvious the effect): set the parent element
Perspective-origin: sets the location of the perspective point
Transform-style: specifies that the child elements of an element are located in 3D space. Value: flat | preserve-3d
1.1.1 ideas
(1) there are three Ps, put together in a box.
(2) set the style for its box.
.cube {
Width:200px
Height:300px
Transform-style:preserve-3d
Margin:100pxauto
Position:relative
Transform:rotateX (30deg)
Border-radius:50%
Padding:60px
}
(3) set the style for each p
.mian {
Width:200px
Height:300px
Background-image:url (1.jpg)
Background-position:400px0
Position:absolute
Background:url (aka.jpg)
Border:1pxsolid#ccc
Transition:2s
}
/ * .mian1: hover {
Transform-origin:right
Transform:rotateY (- 60deg)
} * /
.mian1 {
Transform-origin:right
Transform:translateX (- 200px) rotateY (45deg)
Background-position:00
}
.mian2 {
Background-position:400px0
}
.mian3 {
Transform-origin:left
Transform:translateX (200px) rotateY (45deg)
Background-position:200px0
}
(4) animate it.
.mian3: hover {
Transform:translateX (200px) rotateY (0deg)
}
.mian1: hover {
Transform:translateX (- 200px) rotateY (0deg)
}
1.1.1 Source Code:
Book page
.container {
Width:1000px
Height:650px
Perspective:2000px
Border:1pxsolidtransparent
Overflow:hidden
Margin:0auto
Perspective-origin:10%20%
}
.cube {
Width:200px
Height:300px
Transform-style:preserve-3d
Margin:100pxauto
Position:relative
Transform:rotateX (30deg)
Border-radius:50%
Padding:60px
}
.mian {
Width:200px
Height:300px
Background-image:url (1.jpg)
Background-position:400px0
Position:absolute
Background:url (aka.jpg)
Border:1pxsolid#ccc
Transition:2s
}
/ * .mian1: hover {
Transform-origin:right
Transform:rotateY (- 60deg)
} * /
.mian1 {
Transform-origin:right
Transform:translateX (- 200px) rotateY (45deg)
Background-position:00
}
.mian2 {
Background-position:400px0
}
.mian3 {
Transform-origin:left
Transform:translateX (200px) rotateY (45deg)
Background-position:200px0
}
.mian3: hover {
Transform:translateX (200px) rotateY (0deg)
}
.mian1: hover {
Transform:translateX (- 200px) rotateY (0deg)
}
1.1.2
2094583391-5b70f66722968_articlex.gif
1.1.2 ideas:
(1) there are five p, each with five words.
Front
End
Small
To learn
Born
(2) overall styling for box and p
# box {
Margin:100pxauto
Font-size:100px
Color:#005aa0
Text-align:center
}
.ze1, .ze2, .ze3, .ze4, .ze5 {
Display:inline-block
Width:90px
Height:100%
Position:relative
}
(3) set pseudo elements before and after
.ze1: before,.ze2:before,.ze3:before,.ze4:before,.ze5:before {
Content:attr (data)
Position:absolute
Color:#ffffff
Top:0
Left:2px
Transform-origin:left
Transition:transform.5s
}
.ze1: before {
Content: "front"
}
.ze2: before {
Content: "end"
}
.ze3: before {
Content: "small"
}
.ze4: before {
Content: "Learning"
}
.ze5: before {
Content: "Health"
}
.ze1: after,.ze2:after,.ze3:after,.ze4:after,.ze5:after {
Position:absolute
Color:#b3b3b3
Top:3px
Left:10px
Z-index:-1
Transform-origin:left
Transition:transform.5s
}
.ze1: after {
Content: "front"
}
.ze2: after {
Content: "end"
}
.ze3: after {
Content: "small"
}
.ze4: after {
Content: "Learning"
}
.ze5: after {
Content: "Health"
}
(4) animate it.
.ze1: hover:before,.ze2:hover:before,.ze3:hover:before,.ze4:hover:before,.ze5:hover:before {
Transform:rotateY (- 40deg) skewY (10deg)
}
.ze1: hover:after,.ze2:hover:after,.ze3:hover:after,.ze4:hover:after,.ze5:hover:after {
Transform:rotateY (40deg) skewY (10deg)
}
1.1.2 Source Code:
Dynamic word
# box {
Margin:100pxauto
Font-size:100px
Color:#005aa0
Text-align:center
}
.ze1, .ze2, .ze3, .ze4, .ze5 {
Display:inline-block
Width:90px
Height:100%
Position:relative
}
.ze1: before,.ze2:before,.ze3:before,.ze4:before,.ze5:before {
Content:attr (data)
Position:absolute
Color:#ffffff
Top:0
Left:2px
Transform-origin:left
Transition:transform.5s
}
.ze1: before {
Content: "front"
}
.ze2: before {
Content: "end"
}
.ze3: before {
Content: "small"
}
.ze4: before {
Content: "Learning"
}
.ze5: before {
Content: "Health"
}
.ze1: after,.ze2:after,.ze3:after,.ze4:after,.ze5:after {
Position:absolute
Color:#b3b3b3
Top:3px
Left:10px
Z-index:-1
Transform-origin:left
Transition:transform.5s
}
.ze1: after {
Content: "front"
}
.ze2: after {
Content: "end"
}
.ze3: after {
Content: "small"
}
.ze4: after {
Content: "Learning"
}
.ze5: after {
Content: "Health"
}
.ze1: hover:before,.ze2:hover:before,.ze3:hover:before,.ze4:hover:before,.ze5:hover:before {
Transform:rotateY (- 40deg) skewY (10deg)
}
.ze1: hover:after,.ze2:hover:after,.ze3:hover:after,.ze4:hover:after,.ze5:hover:after {
Transform:rotateY (40deg) skewY (10deg)
}
Front
End
Small
To learn
Born
1.1.3 do not write the idea, only write the source code
1.1.3 Source Code:
3D animation
Body {
Margin:0
Background:url (iom.jpg)
Background-size:100%
Position:relative
}
.box {
Width:430px
Height:430px
Position:absolute
Top:100px
Left:480px
Border:1pxsolid#ccc
Border-radius:215px
Text-align:center
Animation:dong20sinfinitelinear
}
.ai {
Width:10px
Height:10px
Background:#0c0
Border-radius:5px
Position:absolute
Right:38px
Top:340px
}
@ keyframesdong {
0% {
Transform:rotate (0deg)
}
100% {
Transform:rotate (720deg)
}
}
.mrin {
Width:320px
Height:320px
Border:1pxsolid#ccc
Border-radius:180px
Position:absolute
Top:155px
Left:535px
Animation:mi15sinfinitelinear
}
.ak {
Width:50px
Height:50px
Border:1pxsolid#ccc
Margin:20px0020px
Border-radius:25px
Display:inline-block
Animation:ol5sinfinitelinear
}
.ak.sj1 {
Width:10px
Height:10px
Border-radius:5px
Margin:20px0020px
Background:blue
}
.ak.sj2 {
Width:10px
Height:10px
Margin-top:5px
Background:#fff
Border-radius:5px
}
@ keyframesmi {
0% {
Transform:rotate (0deg)
}
100% {
Transform:rotate (720deg)
}
}
@ keyframesol {
0% {
Transform:rotate (0deg)
}
100% {
Transform:rotate (720deg)
}
}
.mian {
Width:240px
Height:240px
Border:1pxsolid#ccc
Position:absolute
Border-radius:120px
Top:195px
Left:575px
Animation:af5sinfinitelinear
}
.mian.ap {
Width:10px
Height:10px
Border-radius:5px
Background:#f0f
Margin:30px0030px
}
@ keyframesaf {
0% {
Transform:rotate (0deg)
}
100% {
Transform:rotate (720deg)
}
}
.chen {
Width:160px
Height:160px
Border:1pxsolid#ccc
Position:absolute
Border-radius:80px
Top:235px
Left:615px
Animation:oa4sinfinitelinear
}
.ze {
Width:10px
Height:10px
Border-radius:5px
Background:#0c0
Margin:20px0015px
}
@ keyframesoa {
0% {
Transform:rotate (0deg)
}
100% {
Transform:rotate (720deg)
}
}
.yu {
Width:80px
Height:80px
Background-color:darkorange
Border-radius:40px
Position:absolute
Top:275px
Left:655px
Opacity:.7
}
.ak.sj2 {
Width:10px
Height:10px
Margin-top:5px
Background:#fff
Border-radius:5px
}
@ keyframesmi {
0% {
Transform:rotate (0deg)
}
100% {
Transform:rotate (720deg)
}
}
@ keyframesol {
0% {
Transform:rotate (0deg)
}
100% {
Transform:rotate (720deg)
}
}
.mian {
Width:240px
Height:240px
Border:1pxsolid#ccc
Position:absolute
Border-radius:120px
Top:195px
Left:575px
Animation:af5sinfinitelinear
}
.mian.ap {
Width:10px
Height:10px
Border-radius:5px
Background:#f0f
Margin:30px0030px
}
@ keyframesaf {
0% {
Transform:rotate (0deg)
}
100% {
Transform:rotate (720deg)
}
}
.chen {
Width:160px
Height:160px
Border:1pxsolid#ccc
Position:absolute
Border-radius:80px
Top:235px
Left:615px
Animation:oa4sinfinitelinear
}
.ze {
Width:10px
Height:10px
Border-radius:5px
Background:#0c0
Margin:20px0015px
}
@ keyframesoa {
0% {
Transform:rotate (0deg)
}
100% {
Transform:rotate (720deg)
}
}
.yu {
Width:80px
Height:80px
Background-color:darkorange
Border-radius:40px
Position:absolute
Top:275px
Left:655px
Opacity:.7
}
The above is all the contents of the article "how to achieve 3D Animation effects with css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
