CSS3 Tutorial: Transform Perspective Property settings

Source: Internet
Author: User
Tags interface string

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?

1 2
"animateTest" style= "-webkit-transform: perspective(400px) rotateY(40deg);" >
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.

Related Article

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.