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

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!

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.