Shulou(Shulou.com)06/01 Report--

This article mainly explains the "css3 transform in how to use scale zoom", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "css3 transform in scale zoom how to use" it!

Let's start with three aspects:

1. Scale (xQuery y) zooms the element

X indicates the multiple of horizontal scaling | Y represents the multiple of vertical scaling.

Y is an optional parameter, and if it is not set, it means that the magnification in both directions of XQuery Y is the same. And X shall prevail.

Transform:scale (2. 5)

2. The scaleX () element scales the element only in the X axis (horizontal direction).

The default value is 1, which is also at the center of the element. You can change the base point through transform-origin

Transform:scaleX (2)

3. The scaleY () element scales the element only in the Y axis (vertical direction).

The base point is also at the center of the element. You can change the base point through transform-origin.

Transform:scaleY (2)

Finally, let's take a look at compatibility:

The code is as follows:

.test {

-moz-transform:scale (2pr 2)

-webkit-transform:scale (2pr 2)

-o-transform:scale (2pr 2)

Background:url (img/i.png) no-repeat

Width:198px

Height:133px

}

Thank you for reading, the above is the content of "how to use scale scaling in css3's transform". After the study of this article, I believe you have a deeper understanding of how to use scale scaling in css3's transform. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.