Detailed description of CSS3 3D conversion instances and css3 conversion instances

Detailed description of CSS3 3D conversion instances and css3 conversion instances

The 3D effects of CSS3 are very good. This article implements two simple 3D flip effects. First, let's look at the effect and source code. At the end of this article, it is the summary part of the article. ^_^

The following CSS Code does not add a prefix for simplicity. Please add it as needed (other methods are recommended in the automation age, such as the gulp-autoprefixer plug-in, because I prefer gulp #_#)

This sentence in w3school is outdated:

 

So far, modern browsers basically support attributes related to 3D transformations without prefixes (except for IE and the backface-visibility of Safari9 still need to be prefixed-webkit, and there are some minor issues with other browsers)

You Can view the support of each browser for the CSS3 attribute on the Can I use Website:

 

I heard that it is now popular to look at the effect and code before explaining it?

(1) effect 1

HTML code:

<Div class = 'state'> <div class = 'Container'> <div class = 'front'> </div> <div class = 'back'> </div> </div>View Code

CSS code:

. Stage {width: 140px; height: 200px; perspective: 800px ;}. container {position: relative; width: 140px; height: 200px; transform-style: preserve-3d; transition: 1 s ;}. front {position: absolute; width: 140px; height: 200px; background-image: url ('HTTP: // custom); background-size: cover; backface-visibility: hidden ;}. back {position: absolute; width: 140px; height: 200px; background-image: url ('HTTP: // www.bkjia.com/uploads/allianz 160827/16031334v-4.jpg'); background-size: cover; transform: rotateY (180deg); backface-visibility: hidden ;}. stage: hover. container {transform: rotateY (180deg );}View Code

 

(2) effect 2

Effect link: http://codepen.io/FEwen/pen/kXOXpJ

HTML code:

<Ul class = "wrap"> <li class = "stage"> <div class = 'Container'> <div class = "front"> </div> <p class = "back"> handsome Hu Ge </p> </div> </li> <li class = "stage"> <div class = 'Container'> <div class = "front"> </div> <p class = "back"> beautiful Zhao liying </ p> </div> </li> <li class = "stage"> <div class = 'Container'> <div class = "front"> </div> <p class =" back "> pure Liu Yifei </p> </div> </li> </ul>View Code

CSS code:

* {Margin: 0; padding: 0 ;}. stage {width: 100px; height: 100px; perspective: 2000px; list-style: none ;}. container {position: relative; width: 100px; height: 100px; transform-style: preserve-3d; transition: 1 s ;}. front {position: absolute; width: 100px; height: 100px; transform: translateZ (50px); backface-visibility: hidden ;}. front img {width: 100%; height: 100% ;}. back {position: absolute; display: block; width: 100px; height: 100px; text-align: center; line-height: 100px; transform: rotateY (90deg) translateZ (50px); backface-visibility: hidden;} li: nth-child (1 ). back {background-color: skyblue;} li: nth-child (2 ). back {background-color: pink;} li: nth-child (3 ). back {background-color: lightyellow ;}. container: hover {transform: rotateY (-90deg );}View Code

 

Summary:

In the sample code above, pay attention to several Class names: Class Name stage indicates the stage element, class name container indicates the parent container, and transformation sub-elements in the container.

This is a standard nested 3D transformation structure:

Stage (perspective, perspective-origin)

Parent container (transform-style: preserve3d) (various transformations)

Sub-elements (various transformations)

Sub-elements (various transformations)

Sub-elements (various transformations)

...

 

There is also a nested 3D transformation structure:

Stage (perspective, perspective-origin)

Sub-elements (various transformations)

Sub-elements (various transformations)

Sub-elements (various transformations)

...

First, you can have an intuitive understanding of the above structure. The following describes in detail.

 

The main attributes of CSS3 transformation are as follows:

(1) perspective (refer to the above class name stage)

Usage: applies to stage elements. When a perspective attribute is defined for an element, its child elements obtain the perspective effect.

Purpose: Define the distance (line of sight) between a 3D element and a view. The unit is pixel. It can be understood as how far to observe the object, so the smaller the value, the closer it is to the element object, the more obvious the 3D effect; the larger the value, the farther away it is from the element object, the less obvious the 3D effect, because we can only see a bunch of things.

Note: in actual application, you can set multiple stage elements to implement the transformation of sub-elements relative to their respective stages, the visual effects produced by element transformations on each stage are consistent (refer to the second example above ).

 

(2) perspective-origin (refer to the above class name stage)

Usage: used for stage elements. used in combination with perspective, sub-elements can obtain the perspective effect.

Purpose: it can be understood as the position of the eye. The default center point of the stage

Note: Several setting methods, such

Perspective-origin: 0px 100px; (use a specific value)

Perspective-origin: 0% 50%; (percentage used)

Perspective-origin: left center; (three types in total: left/center/right)

 

(3) transform-style: preserve-3d (refer to the use in the above class name container)

Usage: Used for the parent element of the animation child element, that is, the container

Role: it has two roles. First, the child element has a perspective effect, and then the child element retains the 3D position of the parent element.

Note: What is the purpose of this attribute? What is the relationship with perspective?

-- This attribute is used to nest 3D elements! Perspective and transform-style each make the child element have a 3D perspective effect, and transform-style: The preserve-3d makes the child element retain the 3D location of the parent element, simply nested. This attribute is not required if 3D elements do not need to be nested. See the following example:

Effect:

HTML code:

<Div class = 'state'> <div class = 'Container'> </div>View Code

CSS code:

. Stage {width: 140px; height: 200px; perspective: 800px ;}. container {width: 140px; height: 200px; transition: 1 s; background-image: url ('HTTP: // www.bkjia.com/uploads/allianz 160827/1603133506-3.jpg'); background-size: cover ;}. stage: hover. container {transform: rotateY (180deg );}View Code

 

(4) backface-visibility: hidden (refer to the use of the child element used for 3D transformation)

Usage: used for animation child elements

Purpose: In 3D perspective, you can see the front content on the back by default (see the effect of the third point) and set it to invisible as needed.

 

(5) last point -- coordinate transformation description

The image below is a stolen Image

The coordinate system is relative! Relatively! Relatively!

The coordinate system changes with the transformation of the current element.

For example, if the current div applies rotateY (60deg), the entire coordinate system will follow rotateY (60deg). Therefore, the use of translateZ () for this div is always perpendicular to the front.

 

(6) Last but not least. I wish you a happy day. If you find anything wrong with me, please tell me it!