CSS3 Tutorial: Transform Perspective Property settings

Article Introduction: The transform in CCS3 is a great tool for setting interface styles and animations. 3D transformations are also supported in Chrome and FF. IE9 not supported, IE10 support.

What is the difference between the following two lines of statement?

Css

1 2	"animateTest" style= "-webkit-transform: perspective(400px) rotateY(40deg);" >

Css

1 2	"animateTest" style= "-webkit-transform: rotateY(40deg) perspective(400px);" >

If you are not clear, please listen to me.

The transform in CCS3 is a great tool for setting interface styles and animations. 3D transformations are also supported in Chrome and FF. IE9 not supported, IE10 support.

As long as the 3D scene will be involved in perspective and perspective issues. The setting method in transform is relatively simple:

1. You can only choose perspective, which is the way to display the large and small.
2. The lens direction can only be parallel to the z axis in the screen, that is, from the front of the screen to look inside.
3. Can adjust lens and plane position:

• A The Perspective property sets the distance from the lens to the element plane. All elements are placed on the z=0 plane. For example, Perspective (300px) indicates that the lens is positioned 300 pixels from the surface of the element.
• b The Perspective-origin property sets the position of the lens on the plane. The default is to place the center of the element.

Here's a cube (or dice) to show you the difference between different perspectives (perspective and).

The effect of the lens distance from the z=0 plane to different distances.

The difference between the x and Y coordinates (perspective-origin) when the lens is fixed at the z-coordinate.

Using CSS3 for 3D transformations is simple.

For example: let a div rotate one angle along the y axis:

Above the original Div and picture, the following is the effect of rotation.

  

    

  


  

     
  
"
 
The first picture is the original state of the Div, the second diagram is the effect of rotation.
 
 
  
 
Is the effect not obvious? This is because the lens is too far away from the plane, so the rotation effect is not obvious. Now let's try perspective properties. We set the perspect=400px.
 
   

 
   
"
 
 
  
 
How is the effect now obvious? This is the purpose of perspective.
 
But a problem in chrome is that perspective must be in front of Rotatey (or Rotatex). If the code is written in the following case, the perspective setting is invalid.
 
   
 
This is also true of Firefox.
 
This is not explained in Mozilla's documentation. It is not yet certain whether the design is this or a bug. In short everybody uses the time to put prespective in front good.