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

This article "how to use pure CSS to achieve 3D" article, the article sample code introduction is very detailed, with a certain reference value, interested friends must refer to, for "how to use pure CSS to achieve 3D", Xiaobian sorted out the following knowledge points, please follow the pace of the editor step by step slowly understand, then let us enter the topic.

I. cube

I think cubes can be regarded as the basis of 3D images. first of all, cubes are made up of six identical faces, and secondly, we need to construct them in turn. (according to the body structure in the code)

The code is as follows:

Cube

.d3 {

Height:300px

Width:300px

Perspective:800px

Margin:140pxauto

Border:1pxsolid#ccc;}

.stage {

Height:300px

Width:300px

Transform-style:preserve-3d

Position:relative

Transform:rotateX (45deg) rotateY (45deg)

}

.role {

Height:300px

Width:300px

Position:absolute

}

.stage {

Animation:dong3slinearinfinite; (this is the stage)

}

.stage: hover {

Animation:paused

}

@ keyframesdong {(this is the animation that rotates the stage)

From {

Transform:rotateX (45deg) rotateY (45deg)

}

To {

Transform:rotateX (405deg) rotateY (405deg)

}

}

.di1 {(front of cube)

Background:rgb (21 and 163, 52)

Transform:translateZ (150px); (move 150px forward along the z axis)

Font-size:100px

Font-family:KaiTi

Text-align:center

Line-height:300px

}

.di2 {(behind the cube)

Background:blue

Transform:translateZ (- 150px) rotateY (180deg); (move 150px forward along the z-axis and then rotate 180 °along the y-axis * Note the order is to move first and then rotate)

Font-size:100px

Font-family:KaiTi

Text-align:center

Line-height:300px

}

.di3 {(left side of cube)

Background:purple

Transform:rotateY (- 90deg) translateZ (150px)

Font-size:100px

Font-family:KaiTi

Text-align:center

Line-height:300px

}

.di4 {(right side of cube)

Background:pink

Transform:rotateY (90deg) translateZ (150px)

Font-size:100px

Font-family:KaiTi

Text-align:center

Line-height:300px

}

.di5 {(above the cube)

Background:red

Transform:rotateX (90deg) translateZ (150px)

Font-size:100px

Font-family:KaiTi

Text-align:center

Line-height:300px

}

.di6 {(below the cube)

Background:yellow

Transform:rotateX (- 90deg) translateZ (150px)

Font-size:100px

Font-family:KaiTi

Text-align:center

Line-height:300px

}

(divide the cube into six identical faces)

Front

After

Left

Right

Go up

Lower

2. Dynamic stereoscopic picture album

The effect of designing a picture album into three-dimensional 3D

Use rotation, movement, tilt and 3D effects to make your atlas more beautiful.

The code is as follows:

(position the first one and arrange the next one in turn)

Case one

Body {

Height:100vh

}

.div {

Height:500px

Width:800px

Perspective:800px

Margin:50pxauto

}

.div1 {

Height:500px

Width:800px

Transform-style:preserve-3d

Position:relative

/ * transform:rotateY (- 10deg); * /

}

.div _ 0 {

Height:400px

Width:600px

Position:absolute

Margin-top:110px

Margin-left:50px

}

.div _ 1 {

Height:400px

Width:600px

Background:url. / day03/timg.jpg)

Background-size:600px400px

Border-radius:20px

Transform-origin:rightbottom

Transition:3s

}

.div _ 2 {

Background:url. / day03/timg1.jpg)

Border-radius:20px

Background-size:600px400px

Transform-origin:rightbottom

Transform:rotateZ (2deg) translateZ (- 20px) translateX (20px) translateY (- 20px)

}

.div _ 2:hover {

Transform:rotateZ (0) translateZ (0) translateX (0) translateY (0)

Transition:1s

}

.div _ 2:hover~.div_1 {

/ * transform-origin:rightbottom;*/

Transform:rotateZ (2deg) translateZ (20px) translateX (20px) translateY (- 20px)

Transition:1s

}

/ * body:hover.div_1 {

Opacity:0

Transition:3s

} * /

.div _ 3 {

Background:url (timg2.jpg)

Border-radius:20px

Background-size:600px400px

Transform-origin:rightbottom

Transform:rotateZ (4deg) translateZ (- 40px) translateX (40px) translateY (- 40px)

}

.div _ 3:hover {

Transform:rotateZ (0) translateZ (0) translateX (0) translateY (0)

Transition:1s

}

.div _ 4 {

Background:url (timg4.jpg)

Border-radius:20px

Background-size:600px400px

Transform-origin:rightbottom

Transform:rotateZ (6deg) translateZ (- 60px) translateX (60px) translateY (- 60px)

}

.div _ 4:hover {

Transform:rotateZ (0) translateZ (0) translateX (0) translateY (0)

Transition:1s

}

.div _ 5 {

Background:url (timg5.jpg)

Border-radius:20px

Background-size:600px400px

Transform-origin:rightbottom

Transform:rotateZ (8deg) translateZ (- 80px) translateX (80px) translateY (- 80px)

}

.div _ 5:hover {

Transform:rotateZ (0) translateZ (0) translateX (0) translateY (0)

Transition:1s

}

.div _ 6 {

Background:url (timg3.jpg) no-repeat

Border-radius:20px

Background-size:600px400px

Transform-origin:rightbottom

Transform:rotateZ (10deg) translateZ (- 100px) translateX (100px) translateY (- 100px)

}

.div _ 6:hover {

Transform:rotateZ (0) translateZ (0) translateX (0) translateY (0)

Transition:1s

}

Third, the starry sky in the plane

The code is as follows:

(since js is not used, there is only a flat effect

It is easy for you to master the center point of rotation)

solar system

Body {

Background:url (timg01.jpg) no-repeat

Background-size:100%

}

.box1 {

Height:600px

Width:600px

Margin:0auto

Border:1pxsolid#ccc

Border-radius:50%

}

.box1 _ 0 {

Height:100px

Width:100px

Margin:0auto

Border:1pxsolidwhite

Border-radius:50%

Position:absolute

Top:calc (50%-59px)

Left:322px

Transform-origin:345.5px

Animation:dong25slinearinfinite4s

}

@ keyframesdong2 {

From {

Transform:rotate (0)

}

100% {

Transform:rotate (360deg)

}

}

.box1 _ 2 {

Height:13px

Width:13px

Margin:0auto

/ * border:1pxsolid#ccc;*/

Border-radius:50%

Background:white

Position:absolute

Top:calc (50%-7.5px)

Left:96px

Transform-origin:-45px

Animation:dong35.5slinearinfinite

/ * animation-iteration-count:200;*/

}

@ keyframesdong3 {

From {

Transform:rotate (0)

}

100% {

Transform:rotate (360deg)

}

}

.box1 _ 1 {

Height:15px

Width:15px

Margin:0auto

/ * border:1pxsolid#ccc;*/

Border-radius:50%

Background:rgb (7100223)

Position:absolute

Top:45px

Left:calc (50%-16.5px)

}

.box2 {

Height:400px

Width:400px

Margin:0auto

Border:1pxsolid#ccc

Border-radius:50%

Position:absolute

Top:calc (50%-200px)

Left:calc (50%-200px)

}

.box2 _ 1 {

Height:15px

Width:15px

Margin:0auto

/ * border:1pxsolid#ccc;*/

Border-radius:50%

Background:rgb (198208221)

Position:absolute

Top:calc (50%-7.5px)

Left:43px

Transform-origin:157.5px

Animation:dong15slinearinfinite.5s

}

@ keyframesdong1 {

From {

Transform:rotate (0)

}

100% {

Transform:rotate (360deg)

}

}

.box2 _ 2 {

Height:15px

Width:15px

Margin:0auto

Border-radius:50%

Background:#644e11

Position:absolute

Top:calc (50%-7.5px)

Left:-7px

Transform-origin:207.5px

Animation:dong5slinearinfinite

}

@ keyframesdong {

From {

Transform:rotate (0)

}

100% {

Transform:rotate (360deg)

}

}

.box3 {

Height:300px

Width:300px

Margin:0auto

Border:1pxsolid#ccc

Border-radius:50%

Position:absolute

Top:calc (50%-150px)

Left:calc (50%-150px)

}

.box4 {

Height:30px

Width:30px

Margin:0auto

Border-radius:50%

Background:orange

Position:absolute

Top:calc (50%-15px)

Left:calc (50%-15px)

}

.boxli {

Height:900px

Width:900px

Margin:0auto

Border:1pxsolid#ccc

Border-radius:50%

Position:absolute

Top:-120px

Left:calc (50%-450px)

}

.boxli _ 1 {

Height:15px

Width:15px

Margin:0auto

Border-radius:50%

Background:rgb (116, 100, 56)

Position:absolute

Top:500px

Left:-6px

Transform-origin:455.5px-38px

Animation:dongli5slinearinfinite

}

@ keyframesdongli {

From {

Transform:rotate (0)

}

100% {

Transform:rotate (360deg)

}

}

What is the basic syntax of css? the basic syntax of css is: 1, the css rule consists of a selector and one or more declarations; 2, the selector is usually a HTML element that needs to change the style; 3, each declaration consists of an attribute and a value; 4, attributes and attribute values are separated by colons.

The above is all the content of the article "how to use pure CSS to achieve 3D". 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.