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

This article will explain in detail how to use CSS3 to achieve cool 3D rotation perspective. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Start

Introduction of common API for 1.CSS3 3D conversion

Rotate

RotateX ()

RotateY ()

The above api of rotateZ () respectively represent rotation around the x-axis. The following is an example of rotation around the x-axis:

The related code is as follows:

. d3-wrap {

Position: relative

Width: 300px

Height: 300px

Margin: 120px auto

/ * specify how to render nested elements in 3D space * /

Transform-style: preserve-3d

Transform: rotateX (0) rotateY (45deg)

Transform-origin: 150px 150px 150px

}

.rotateX {

Width: 200px

Height: 200px

Background-color: # 06c

Transition: transform 2s

Animation: rotateX 6s infinite

}

@ keyframes rotateX {

0% {

Transform: rotateX (0)

}

100% {

Transform: rotateX (360deg)

}

}

Displacement (Transform)

TranslateX (x) defines 3D conversion, using only the values used for the X axis

TranslateY (y) defines a 3D conversion, using only the values used for the Y axis

TranslateZ (z) defines the 3D transformation, using only the values used for the Z axis. The above api represents the displacement relative to the z axis, respectively. The following example is an example of displacement to the z axis:

What we need to note here is that in order to see the effect of displacement, we need to add the following attributes to the parent container:

. d3-wrap {

Transform-style: preserve-3d

Perspective: 500

/ * set the view where the element is viewed * /

-webkit-perspective: 500

}

When you define a perspective attribute for an element, its child elements get perspective, not the element itself. The code is as follows:

. d3-wrap {

Position: relative

Width: 300px

Height: 300px

Margin: 120px auto

Transform-style: preserve-3d

Perspective: 500

-webkit-perspective: 500

Transform: rotateX (0) rotateY (45deg)

Transform-origin: center center

}

.transformZ {

Width: 200px

Height: 200px

Background-color: # 06c

Transition: transform 2s

Animation: transformZ 6s infinite

}

@ keyframes transformZ {

0% {

Transform: translateZ (100px)

}

100% {

Transform: translateZ (0)

}

}

3D Zoom

ScaleX (x) gives a 3D scaling conversion value for an X axis

ScaleY (x) 3D scaling conversion value given a Y axis

ScaleZ (x) given that the 3D scaling conversion value scaling setting for a Z axis is similar to the one above, I won't say much here.

In theory, the above three common transformations are enough, but it is worth noting that if we want elements to show 3D effects, the following non-negligible API is also important:

2.CSS3 3D application scene

Css 3D is mainly used in website interaction and model effects, such as:

3D round picture

3D product introduction

Indoor 3D simulation

H6 3D activity page, the typical one is the year-end summary H5 of Taobao.

3D data visualization and mapping

In fact, if you are familiar with css 3D, some basic 3D models can be drawn with css.

Implement a cube with 3.CSS3 3D

The core idea is to use 6 faces to splice, and adjust the position of each other by setting rotate and translate, as follows:

The specific code is as follows:

.container {

Position: relative

Width: 300px

Height: 300px

Margin: 120px auto

Transform-style: preserve-3d

/ * in order to make it more stereoscopic * /

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

Transform-origin: 150px 150px 150px

Animation: rotate 6s infinite

}

.container .page {

Position: absolute

Width: 300px

Height: 300px

Text-align: center

Line-height: 300px

Color: # fff

Background-size: cover

}

.container. Page:first-child {

Background-image: url. / my.jpeg)

Background-color: rgba (0pd0re0p0pl .2)

}

.container. Page:nth-child (2) {

Transform: rotateX (90deg)

Transform-origin: 0 0

Transition: transform 10s

Background-color: rgba (179,15,64,0.6)

Background-image: url. / my2.jpeg)

}

.container. Page:nth-child (3) {

Transform: translateZ (300px)

Background-color: rgba (22,160,137,0.7)

Background-image: url. / my3.jpeg)

}

.container. Page:nth-child (4) {

Transform: rotateX (- 90deg)

Transform-origin:-300px 300px

Background-color: rgba (210,212,56,0.2)

Background-image: url. / my4.jpeg)

}

.container. Page:nth-child (5) {

Transform: rotateY (- 90deg)

Transform-origin: 0 0

Background-color: rgba (201,23,23,0.6)

Background-image: url. / my5.jpeg)

}

.container. Page:nth-child (6) {

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

Transform-origin: 0 300px

Background-color: rgba (16,149,182,0.2)

Background-image: url. / my6.jpeg)

}

Html structure

A

B

C

D

E

F

On "how to use CSS3 to achieve cool 3D rotation perspective" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

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.