24th Chapter CSS3 Deformation effect [bottom]

Learning Essentials:

Introduction to 1.3D deformation

2.transform-style

3.perspective

4.3D Warp Properties

Keynote Teacher: Li Tinghui

This chapter mainly discusses the deformation effect of CSS3 in HTML5, and then transforms the 2D plane deformation of the last lesson to 3D stereoscopic deformation.

A. Introduction to 3D deformation

Before we learned the functions of translating, rotating, zooming, and skewing elements. These effects are purely on a two-dimensional floor plan, which we call 2D. In fact, CSS3 also provides a three-dimensional three-dimensional functional effects, and the current newer mainstream browsers are compared to support, but more than 2D later, the browser version of the requirements are higher.

As the 3D is three-dimensional, on the basis of the x, Y axis generally will be more than a Z axis, deep jump out of the axis. The following is a table of the attribute values for the 3D transformation, as follows:

Property value	Description
Translate3d (x, Y, z)	Translate elements in 3D mode, set X, Y, and Z axes
Translatez (z)	Set the z-axis of the translation element in 3D mode
Scale3d (x, Y, z)	3D way to scale an element
Scalez (z)	Set the z-axis of a 3D-mode scale element
Rotate3d (X,y,z,a)	Rotate elements in 3d mode
Rotatex (a)	Sets the X, Y, and z axes of the rotated elements in 3D mode, respectively
Rotatey (a)
Rotatez (a)
Perspective (Length value)	Set up a perspective projection matrix
Matrix3D (Multiple values)	Define a matrix

3D deformation is later than 2D deformation, so if you need to be compatible with the old version of the browser, you can control this table. Specific as follows:

	Opera	Firefox	Chrome	Safari	Ie
Support with prefix required	15 ~ 22	10 ~ 15	12 ~ 35	4 ~ 8	No
Support without prefixes	23+	16+	26+	No	10.0+

Compatible version full form

-webkit-transform:translatez (200px);-moz-transform:translatez (200px);-o-transform:translatez (200px);- Ms-transform:translatez (200px); Transform:translatez (200px);

two. Transform-style

The Transform-style property specifies how nested elements are rendered in 3D space.

Property value	Description
Flat	The default value, which indicates that all child elements are rendered on a 2D plane.
Preserve-3d	Represents a child element that is rendered in 3D space.

Typically set to the parent element of the current element

transform-style:preserve-3d;

You will need to mate with the following feature properties and deform configurations to see the effect. Similarly, this attribute also needs to be prefixed with various vendors.

three. Perspective

Perspective is an important attribute of 3D deformation, which sets the viewer's location and maps the visual content to a frustum, which is then placed on a 2D plane.

Property value	Description
None	The default value represents an infinite angle of 3D objects, but looks flat.
Length value	Accept a value that is greater than 0 for a unit of length and cannot be a percentage. The higher the value, the farther the angle appears, as if you were a little farther away from the object. The smaller the value, the opposite.

Sets the distance position of the viewer, typically set on the parent element of the element

perspective:1000px;

You will need to mate with the following feature properties and deform configurations to see the effect. Similarly, this attribute also needs to be prefixed with various vendors.

Four. 3D Warp Properties

We use the previous 3D function attributes Transform-style and perspective to build the 3D deformation effect.

1.translate3d (x, Y, z)

An HTML structure that requires a 3D displacement must have a parent element containing

<div id= "A" >    </div>

CSS section, parent element set 3D rendering and set perspective distance

{    Perspective: 1000px;     transform-style: preserve-3d;}  {    /*Z axis can be negative */    transform: Translate3d ( 300px,100px,240px);}

2.translateZ (z)

You can set the z-axis individually, and the z-axis can be negative

{    transform: Translatez (240px);}

3.scale3d (x, Y, z)

3D scaling, separate settings not valid, need to fit angle

{    transform: scale3d (1,1,1.5) Rotatex (45deg);}

4.scaleZ (z)

Set the z axis individually, and the x and Y axes default to 1

{    transform: Scalez (1.5) Rotatex (45deg);}

5.rotate3d (X,y,z,a)

Set 3D rotation, a for angle, and XYZ to be a value between 0 or 1

Transform:rotate3d (1,0,0,45DEG);

6.rotateX (a) , Rotatey (a) , Rotatez (a)

Set 3D rotation individually

Transform:rotatex (45deg), Transform:rotatey (45deg), Transform:rotatez (45deg), Transform:rotatex (45deg) Rotatey ( 45DEG) Rotatez (45deg);

The last Matrix3D is not much to say, ignore.

CSS3 also provides the Perspective-origin property to set the source point angle in 3D transformations. The default value for this property is 50% 50%, which is Center center.

Property value	Description
Percent value	Specify the starting point of an element's x-axis or y-axis
Length value	Specify distance
Left	Specify the position of the x-axis
Center
Right
Top	Specify the position of the y-axis
Center
Bottom

The source point is set to the top right warp

Perspective-origin:top right;

CSS3 also provides a value perspective (length value) that sets the pivot in the element, but it is also different from the parent element setting. Because the parent element is the whole as a perspective, and the element itself as a perspective, it causes the difference.

Specific test to see the distance of perspective

{    transform: Perspective (1000px) Rotatey (45deg);}

24th Chapter CSS3 Deformation effect [bottom]