Scalez and Scale3d CSS example (scale in 3D space in CSS3)

A series of animation properties have added in CSS3, including a property Scale for setting the size of objects (such as div, ul li, text, etc.). Objects can be scaled on the X, Y, and Z axes by Scale, and the corresponding properties are ScaleX, ScaleY, and ScaleZ; the values set on the X, Y, and Z axes at the same time are the object scaled in three dimensions.

If you only require the object to be scaled in the plane, use the Scale; if you require the object to be scaled in three-dimensional space, use Scale3d. The case of plane scaling has been introduced in the previous article. This article continues to introduce space scaling, first introducing the syntax rules of Scalez and Scale3d, and then listing an application example, respectively.

I. Grammar rules of Scalez

scalez(<number>)

calez is used to set the scale of the object in the Z axis. The in the expression indicates the zoom size. For example, take .8 (reduced to 80% of the original), and take 1.5 (zoomed to the original 1.5 times).

II. Grammar rules of Scale3d

Scale3d(<number>, <number>, <number>)

The first : indicates that the object is scaled on the X axis and cannot be omitted;

The second : indicates that the object is zoomed on the Y axis and cannot be omitted;

The third : indicates that the object is zoomed on the Z axis and cannot be omitted.

III. Scalez() and Scale3d css example

1. Scalez() css example

html code:

<div class="scalez">transform:scalez(.8);</div>

CSS style:

.scalez{transform:scalez(.8);width:220px;height:120px; border:1px solid #a78282;background-color:#e3e1dd;padding:8px;}

Effect picture:

As can be seen from the Effect picture, since it is not a cube structure, the changes of rectangles and characters cannot be seen.

2. Css Scale3d example

html code:

<div class="scalescr">Original size</div>

<div class="scalescr scale3d">transform:Scale3d(.5,.5,.8)</div>

CSS style:

.scalescr{width:320px;height:120px; border:1px solid #a78282;background-color:#e3e1dd; padding:8px;}
.scale3d{transform:Scale3d(.5,.5,.8);}

Effect picture:

As can be seen from the above figure, the rectangle changes very significantly in the horizontal plane, and it may be scaled to only a quarter of the original size.