CSS3 Tutorial -3d Conversion

Hello! The previous article to introduce the CSS3 tutorial -2d conversion, do not know how you learn? Next, we introduce CSS3 tutorial -3d conversion.

3D Conversion:

CSS3 allows you to format elements using a 3D conversion.

In this article, you will learn two methods of 3D conversion:

Rotatex ();

Rotatey ().

How does it work?

Transformations are an effect that changes the shape, size, and position of an element.

You can use 2D or 3D transformations to transform your elements.

Browser support:

Internet Explorer 10 and Firefox support 3D conversions.

Chrome and Safari need a prefix of-webkit-.

Opera still does not support 3D conversion (it only supports 2D conversions).

Rotatex () Method:

With the Rotatex () method, the element rotates around its X axis in a given degree.

Instance:

Div{transform:rotatex (120deg);-webkit-transform:rotatex (120deg);/* Safari and Chrome */}

Rotatey () Method:

The Rotatey () method, which rotates around its element in the y-axis of a given degree.

Instance:

Div{transform:rotatey (130deg);-webkit-transform:rotatey (130deg);/* Safari and Chrome */}

Conversion Properties:

The following table lists all the conversion properties:

3D Conversion Method:

The above is the CSS3 tutorial -3d conversion content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

