Transform in Transform

Article Introduction: today we will explore the use of Transform-style and perspective related properties in transform.

Today we will discuss with you the use of the transform transform-style perspective related attributes.

Transform-style Property

transform-styleProperties are an important attribute of 3D space, specifying how nested elements are rendered in 3D space. He has two main attribute values: flat and preserve-3d .

transform-styleThe syntax for using a property is simple:

transform-style: flat  preserve-3d
		

The flat value is the default value, which means that all child elements are rendered in the 2D plane. preserve-3drepresents that all child elements are rendered in 3D space.

That is, if a value is set for an element transform-style flat , all child elements of the element are rendered in the 2D plane of the element. Rotating the element along the x-axis or y-axis causes the child element at the position of the positive or negative z-axis to appear on the plane of the element, not before or after it. If the value set for an element transform-style is preserve-3d , it means that no flattened operation is performed and all of his child elements are in 3D space.

transform-styleProperties need to be set in the parent element and are higher than any nested variant elements. Finally, we use a flip example to deepen the transform-style impression of attributes:

HTML templates

<div
					class="wrap">
			<div
					class="spin">
			<div
					class="rotate">
			
			</div>
			</div>
			</div>
			<div
					class="wrap">
			<div
					class="spin">
			<div
					class="rotate three-d">
			
			</div>
			</div>
			</div>
		

Css

.wrap {width:500px;
					height:300px;
					margin:30px Auto;
					position:relative;
					Background:url (images/bg-grid.jpg) No-repeat Center Center;
					background-size:100% 100%; /* Set animation/* @keyframes spin{0%{Transform:rotatey (0deg)} 100%{Transform:rotatey (360deg
					}}. spin {width:142px;
					height:200px;
					Position:absolute;
					top:50%;
					left:50%;
					Margin-left: -72px;
					Margin-top: -101px;
					border:1px dashed orange;
					Cursor:pointer;
					transform-style:preserve-3d;
					/* Call Animation/* spin:hover{Animation:spin 5s linear infinite;
					}. Rotate {background:url (images/cardkingclub.png) no-repeat Center;
					background-size:100% 100%;
					border:5px solid Hsla (50,50%,50%,.9); Transform:perspectIve (200px) rotatey (45deg);
					}. Rotate img{border:1px solid green;
					Transform:rotatex (15deg) Translatez (10px);
					transform-origin:0 0 40px;
					/* Change the default value of Transform-style/* three-d {transform-style:preserve-3d; }
		

Special statement: in order to save space, the Code CSS3 Property Code eliminates the private prefix of each browser, in the actual operation, the need to add the browser prefix, will have effect.

The effect is as follows:

As you can see, when an element setting .rotate has a flat value set, its child elements are img not translateZ() spread out according to the value, but are rotated in the same plane, as shown in the previous illustration, and when the element is .rotate set to a value preserve-3d , its child elements img are spread out according translateZ() to the value. are no longer stacked together, as shown in the following section of the figure above.

It is important to remind you that if your element is set to a value, you 了transform-style preserve-3d cannot set the value to prevent the child element from spilling the container overflow hidden , if you set the overflow:hidden same can force the child element to appear in the same plane (and the element transform-style is set to flatthe same effect), as shown in the following illustration:

Perspective Property

perspectiveProperties are critical for 3D deformations. This property sets the viewer's position and maps the visual to a visual cone, which is then dropped onto a 2D view plane. If you do not specify a perspective, all points in the z-axis space are tiled to the same 2D view, and the concept of depth of field is not present in the transformation results.

The above description may be difficult to understand some, in fact perspective , for attributes, we can simply understand the visual range, used to set the user and element 3D space between the z plane distance. And its effect is determined by his value, the smaller the value, the user and 3D space z plane distance closer, the visual effect is more impressive; conversely, the greater the value, the more the user and 3D space z plane distance, the visual effect is very small.

In 3D transformations, properties are essential for viewing the effects of deformations for certain deformations, such as those shown in the following example, that are deformed along the z-axis perspective .

Let's take a look at a simple example, make a poker 3D rotation effect, and one of the parent elements of the poker to add visual range perspective , and the other is not set:

Html

<div>
			
			
			</div>
			<div>
			
			
			</div>
		

Css

div
			{     width:
									500px;
					height:
									300px;
					margin:
									30px auto;
					position: relative;
					background:
									url(images/bg-grid.jpg) no-repeat center center;
					background-size:
									100% 100%;
					}
			div
			img
			{     position: absolute;
					top:
									50%;
					left:
									50%;
					margin-left: -71px;
					margin-top: -100px;
					transform-origin: bottom;
					}
			div
			img:nth-child(1){     opacity: .5;
					z-index:
									1;
					}
			div
			img:nth-child(2){     z-index:
									2;
					transform:
									rotateX(45deg);
					}
			div:nth-of-type(2){     perspective:
									500px;
					}
		

The effect is as follows:

The effect of the above illustration is complete. If the parent node is not set, the perspective 3D rotation effect of the plum King is not obvious, and after the parent node is set perspective , the Plum King is like a 3D rotation.

The previous example simply demonstrates the use of perspective, and we look back at the syntax of perspective:

perspective：none  <length>
				

perspectiveProperty includes two properties: none and the length value that has the unit. Where the perspective default value of the property is, an infinite angle to look at the none 3D object, but it looks flat. Another value <length> accepts a value that has a length unit greater than 0. and its unit cannot be a percentage value. The larger the <length> value, the farther the angle appears, creating a fairly low intensity and a very small 3D space change. Conversely, the smaller the value, the closer the angle appears, creating a high intensity angle and a large 3D change.

For example, you stand at 10 feet and 1000 feet to see a 10-foot cube. At 10 feet, you are the same size as the cube. So the angle of view is far greater than 1000 feet, and the stereo size is 1% of your distance from the cube. The same thinking applies to perspective the <length> value. Let's take a look at an example to reinforce this understanding:

Html

<div
					class="wrapper w2">
			<div
					class="cube">
			<div
					class="side  front">1</div>
			<div
					class="side   back">6</div>
			<div
					class="side  right">4</div>
			<div
					class="side   left">3</div>
			<div
					class="side    top">5</div>
			<div
					class="side bottom">2</div>
			</div>
			</div>
			<div
					class="wrapper w1">
			<div
					class="cube">
			<div
					class="side  front">1</div>
			<div
					class="side   back">6</div>
			<div
					class="side  right">4</div>
			<div
					class="side   left">3</div>
			<div
					class="side    top">5</div>
			<div
					class="side bottom">2</div>
			</div>
			</div>
		

Css

.wrapper {width:50%;
					Float:left;
					}. cube {font-size:4em;
					Width:2em;
					Margin:1.5em Auto;
					transform-style:preserve-3d;
					Transform:rotatex ( -40deg) Rotatey (32deg);
					}. side {Position:absolute;
					Width:2em;
					Height:2em;
					Background:rgba (255, 99, 71, 0.6);
					border:1px solid Rgba (0, 0, 0, 0.5);
					Color:white;
					Text-align:center;
					Line-height:2em;
					}. Front {Transform:translatez (1em);
					}. Top {Transform:rotatex (90deg) Translatez (1em);
					}. Right {Transform:rotatey (90deg) Translatez (1em);
					}. Left {Transform:rotatey ( -90deg) Translatez (1em);
					}. Bottom {Transform:rotatex ( -90deg) Translatez (1em);
			}. back {Transform:rotatey ( -180deg) Translatez (1em);
					}. w1 {perspective:100px;
					}. w2{perspective:1000px; }
		

The effect is shown in the following illustration:

Based on the above introduction, we can perspective make a simple conclusion to the value:

• Perspective value is None or set, there is no real 3D space.
• The smaller the value of the perspective, the more obvious the 3D effect is, that is, the closer your eyes are to the true 3D.
• The value of the perspective is infinitely large, or the value of 0 o'clock is the same as the value of none.

In order to better understand the perspective attributes, it is necessary for us to combine him with translateZ the relationship. In fact, the perspective value can be simply understood as the distance of the human eye to the monitor, and is the distance from the translate source point of the 3D object, the following refers to a map of the whole of the view to explain perspective and translateZ relations.

The figure above shows the perspective translateZ proportions of the property and the position. To the top of the graph, Z is half D, in order to use the original circle (contour) appears on the z-axis (dashed circle), the solid circle on the canvas will expand two, such as light blue circle. As shown in the bottom figure, the circle shrinks proportionally, causing the dashed circle to appear behind the canvas, and the size of Z is one-third from the original position.

In 3D transformations, the perspective perspective() 3D space can also be activated in 3D-deformed functions, except that the properties can activate a 3D space. The difference is that they are used on perspective stage elements (the common parent element of the deformed elements), on the perspective() current transformation element, and can be used with other transform functions. For example, we can put:

.stage
			{     perspective:
									600px }
		

Written:

.stage
			.box
			{     transform:
									perspective(600px);
					}
		

To see a simple example:

Html

<div
					class="stage">
			<div
					class="container">
			
			</div>
			</div>
			<div
					class="stage">
			<div
					class="container">
			
			</div>
			</div>
		

Css

.stage
			{     width:
									500px;
					height:
									300px;
					margin:
									30px auto;
					position: relative;
					background:
									url(images/bg-grid.jpg) no-repeat center center;
					background-size:
									100% 100%;
					}
			.container
			{     position: absolute;
					top:
									50%;
					left:
									50%;
					width:
									142px;
					height:
									200px;
					border:
									1px dotted orange;
					margin-left: -71px;
					margin-top: -100px;
					}
			.container
			img{     transform:
									rotateY(45deg);
					}
			.stage:nth-child(1)
			.container{     perspective:
									600px;
					}
			.stage:nth-child(2)
			img
			{     transform:perspective(600px)
									rotateY(45deg);
					}
		

The effect looks like this:

The image above can be seen, although the form of writing, the name of the property is inconsistent, but the effect is the same.

Although perspective properties and perspective() functions are the same, they take a different value and use the same image:

• perspectiveA property can take a value of none or a length value, and a perspective() function can only be greater than 0, and if the value is 0 or smaller than 0, the 3D space cannot be activated;
• perspectiveproperty is used to transform a pair like a parent element perspective() , and a function is used to distort the image itself and to transform work with other functions.

The Perspective-origin property

Perspective-origin property is another important property in 3D transformations, and is primarily used to determine perspective The source point angle of the property. It actually sets the x-axis and y-axis positions, where the viewer appears to be viewing the element's child elements. The syntax for using the

Perspective-origin property is also simple:

The default value for this property is 50% 50% (that is, center), which can also be set to a value or to two length values:

• The first length value specifies the position relative to the x-axis of the containing box of the element. It can be a length value (expressed as a supported length unit), a percentage, or one of the following three keywords: left (representing 0 of the length of the x axis of the containing box), Center (representing the middle point), or right (representing 100% of the length). The second length value of
• specifies the position relative to the y-axis of the containing box of the element. It can be either a length value, a percentage, or one of the following three keywords: top (representing 0 of the length of the y-axis of the containing box), Center (representing the middle point), or bottom (represents 100% of the length).

Note that in order to refer to the depth of transformation of a child element, the Perspective-origin property must be defined on the parent element. Typically the Perspective-origin property itself does nothing, and it must be defined in the setting of the perspective the element of the property. In other words, the Perspective-origin property needs to be used in conjunction with the perspective property to move the point of view outside the center of the element, as shown in the following illustration:

Often we look at something that can't always be in a central position, and want to change the angle, Change a position to see exactly, this time is inseparable from the perspective-origin this attribute, the following from the official website of the map can simply elaborate this view:

The following example shows the modification of the perspective-origin The effect of a property value on a cube:

Special declaration:   above examples from http://css-tricks.com/almanac/properties/p/ perspective-origin/

Backface-visibility Property

backface-visibilityproperty determines whether the back of the element rotates is visible. For an element that is not rotated, the face of the element is facing the viewer. When its Y axis rotates about 180 degrees, it causes the back of the element to face the audience.

backface-visibilityThe use of the syntax for a property is simple:

backface-visibility: visible  hidden
		

This property is set to one of the following two keywords:

• Visible: is the default value for Backface-visibility, which means that the negative side is visible
• Hidden: Indicates the negative side is not visible

The visibility of an element and the "Backface-visibility:hidden" decision are as follows:

• Elements in the 3D environment rendering context, will be calculated according to the 3D deformation matrix, whereas the element is not in the 3D environment rendering context, will be based on the 2D deformation matrix.
• If the matrix of the component is negative in line 3rd and 3, then the inverse of the element is hidden and the opposite is visible.

In simple terms, backface-visibility attributes can be used to hide the back of content. By default, the back is visible, which means that even after flipping, the rotated content is still visible. When backface-visibility set to hidden , however, the content is hidden after rotation because the front will no longer be visible after rotation. This feature helps you simulate faceted objects, such as the cards used in the following example. By backface-visibility setting to hidden , you can easily make sure that only the front is visible.

Html

<div class= "Stage" > <div class= "container" > <div cl ass= "card front" ></div> <div class= "card back" ></div> </div> </div> < Div class= "Stage" > <div class= "container" > <div class= "card front" ></div>
					;d IV class= "card back" ></div> </div> </div> <div class= "Stage" > <div class= "Container" > <div class= "card front" ></div> <div class= "card Back" ></div
					> </div> </div> <div class= "Stage" > <div class= "container" > <div
			class= "card front" ></div> <div class= "card back" ></div> </div> </div>
			<div class= "Stage" > <div class= "container" > <div class= "card front" ></div> <div class= "CARd back "></div> </div> </div> <div class=" Stage "> <div class=" containe R "> <div class=" card front "></div> <div class=" card back "></div> </div>
			; </div> <div class= "Stage" > <div class= "container" > <div class= "card front" ;</div> <div class= "card back" ></div> </div> </div>  

CSS

*{margin:0;
					padding:0;
					} body {Background-color:hsla (173,80%,21%,.9);
					}. stage{Float:left;
					border:1px dotted orange;
					position:relative;
					margin:20px;
					border-radius:8px;
					perspective:1000;
					}. container {width:102px;
					height:142px;
					position:relative;
					transition:0.5s;
					transform-style:preserve-3d;
					}. card {position:absolute;
					top:0;
					right:0;
					bottom:0;
					left:0;
					Backface-visibility:hidden;
					}. Front {Background:url (images/cardjfront.png) no-repeat center/100% 100%;
					Z-index:2;
					}. Back {Background:url (images/cardjback.png) no-repeat center/100% 100%;
					Transform:rotatey (180DEG); }. Stage:nth-child(1). container{Transform:rotatey (0DEG);
					}. Stage:nth-child (2). container{Transform:rotatey (30deg);
					}. Stage:nth-child (3). container{Transform:rotatey (60DEG);
					}. Stage:nth-child (4). container{Transform:rotatey (90DEG);
					}. Stage:nth-child (5). container{Transform:rotatey (120DEG);
					}. Stage:nth-child (6). container{Transform:rotatey (150DEG);
					}. Stage:nth-child (7). container{Transform:rotatey (180DEG); }
		

The effect is as follows:

In this case, when you're not spinning, you'll see the front of the poker, which is the Red peach, because it's positioned at the top. As the rotation applied to a poker exceeds 90 degrees, the div second backface-visibility:hidden property causes it to be invisible, so the poker face is displayed. Come on, I can set the second one div to backface-visibility visible :

.card
			{     position: absolute;
					top:
									0;
					right:
									0;
					bottom:
									0;
					left:
									0;
					backface-visibility: visible;
					}
		

The effect is as follows:

The above example, visually not very well understood, we use two 3D cubes to do an example, so that you can visually more directly to distinguish between the backface-visibility value hidden and visible the difference:

Html

<div class= "container" >  
 

CSS

. container {width:500px;
					height:300px;
					Float:left;
					position:relative;
					margin:30px;
					border:1px solid #CCC;
					perspective:1200px;
					}. cube {width:100%;
					height:100%;
					Position:absolute;
					Animation:spincube 8s Infinite ease-in-out;
					transform-style:preserve-3d;
					Transform:translatez ( -100px); } @keyframes Spincube {0% {Transform:translatez ( -100px) Rotatex (0deg) rotate
					Y (0DEG);
					} 100% {Transform:translatez ( -100px) Rotatex (360deg) Rotatey (360deg);
					}}. side {display:block;
					Position:absolute;
					width:196px;
					height:196px;
					BORDER:2PX solid black;
					line-height:196px;
					font-size:120px;
					Font-weight:bold;
					Color:white;
					Text-align:center;
}			. cube.backface-visibility-visible. side {backface-visibility:visible;
					}. Cube.backface-visibility-hidden. side {Backface-visibility:hidden;
					}. Cube. Front {background:hsla (0, 100%, 50%, 0.7);
					}. Cube. Back {Background:hsla (60, 100%, 50%, 0.7);
					}. Cube. Right {Background:hsla (120, 100%, 50%, 0.7);
					}. Cube. Left {Background:hsla (180, 100%, 50%, 0.7);
					}. Cube. Top {Background:hsla (240, 100%, 50%, 0.7);
					}. Cube. Bottom {Background:hsla (300, 100%, 50%, 0.7);
					}. Cube. Front {Transform:translatez (100px);
					}. Cube. Back {Transform:rotatex ( -180deg) Translatez (100px);
					}. Cube. Right {Transform:rotatey (90deg) Translatez (100px); }. Cube. Left {Transform:rotatey ( -90deg) Translatez (100px);
					}. Cube. Top {Transform:rotatex (90deg) Translatez (100px);
					}. Cube. Bottom {Transform:rotatex ( -90deg) Translatez (100px);
		 }

The effect is as follows:

The example above may give you a clearer understanding of backface-visibility the visible hidden difference between the cube on the left side of each page we can see, and the right side of the cube we can only see the area of sight.

Next article

In this article, we discuss the basic use of the attributes,, transform-style perspective , perspective-origin and properties in transform backface-visibility . In the next installment, we'll explore the use of 2d functions in transform.

As reproduced in, please indicate the source: http://www.w3cplus.com/css3/transform-basic-property.html