CSS3 uses scale() and rotate() to achieve zooming and rotation

CSS3 uses scale() and rotate() to achieve zooming and rotation

1. scale() method

Zoom refers to "reducing" and "enlarging". In CSS3, we can use the scale() method to scale an element based on the center origin.

Like the translate() method, the scale() method also has three cases:

(1) scaleX(x): the element is scaled only horizontally (X-axis scaling);
(2) scaleY(y): the element is scaled vertically only (Y-axis scaling);
(3) scale(x,y): the element is scaled horizontally and vertically at the same time (X-axis and Y-axis are scaled at the same time);

1. scaleX(x)

grammar:

transform:scaleX(x)

illustrate:

x represents the multiple of the element's horizontal scaling (X-axis). If it is greater than 1, it means zooming in; if it is less than 1, it means zooming out.
It’s easy to understand if you think about the concept of multiples.

2. scaleY(y)

grammar:

transform:scaleY(y)

illustrate:

y represents the scaling factor of the element along the vertical direction (Y axis). If it is greater than 1, it means enlargement; if it is less than 1, it means reduction.

3. scale(x,y)

grammar:

transform:scale(x,y)

illustrate:

x represents the multiple of the element along the horizontal direction (X axis), and y represents the multiple of the element along the vertical direction (Y axis).
Note that Y is an optional parameter. If the Y value is not set, it means that the scaling factors in the X and Y directions are the same (they are magnified by the same multiple at the same time).

Example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <title>CSS3 scaling () usage</title>
    <style type="text/css">
        /*Set the original element style*/
        .main
        {
            margin:100px auto;/*Horizontal center*/
            width:300px;
            height:200px;
            border:1px dashed gray;
        }
        /*Set the current element style*/
        #jb51
        {
            width:300px;
            height:200px;
            color:white;
            background-color: #3EDFF4;
            text-align:center;
            transform:scaleX(1.5);
            -webkit-transform:scaleX(1.5); /*Compatible with -webkit-engine browsers*/
            -moz-transform:scaleX(1.5); /*Compatible with -moz-engine browsers*/
        }
		/*Ordinary and convenient comparison*/
		 #jbzj
        {
            width:300px;
            height:200px;
            color:white;
            background-color: #3EDFF4;
            text-align:center;
        }
    </style>
</head>
<body>
    <div class="main">
        <div id="jb51">123WORDPRESS.COM1</div>
    </div>
    <div class="main">
        <div id="jbzj">123WORDPRESS.COM2</div>
    </div>
</body>
</html>

The preview effect in the Chrome browser is as follows:

analyze:

As can be seen from the figure above, the element is enlarged 1.5 times along the X-axis (extending in both directions at the same time, the overall enlargement is 1.5 times).

transform:scaleY(1.5);
-webkit-transform:scaleY(1.5); /*Compatible with -webkit-engine browsers*/
-moz-transform:scaleY(1.5); /*Compatible with -moz-engine browsers*/

When using the above code, the preview effect in the browser is as follows:

CSS3 implements zoom function through scale()

Implementing the rotation function through rotate()

The rotate() function rotates the element relative to the origin by the specified angle parameter. It mainly operates in two-dimensional space, setting an angle value to specify the amplitude of rotation. If this value is positive, the element rotates clockwise relative to the origin; if this value is negative, the element rotates counterclockwise relative to the origin. As shown in the following figure:

HTML code:

<div class="wrapper">
  <div></div>
</div>

CSS code:

.wrapper {
  width: 200px;
  height: 200px;
  border: 1px dotted red;
  margin: 100px auto;
}
.wrapper div {
  width: 200px;
  height: 200px;
  background: orange;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

Demonstration Results

The transition can set the time required for the element to change.

Structure code in html

<ul>
<li><img src="image/1.jpg" ></li>
<li><img src="image/2.jpg" ></li>
<li><img src="image/3.jpg" ></li>
</ul>

CSS3 Styles

ul{ 
margin-top:50px; 
list-style:none; 
} 
ul li{ 
width:200px; 
height:150px; 
float:left; 
margin-left:10px; 
-webkit-transition:all 1s; 
-moz-transition:all 1s; 
-o-transition:all 1s; 
} 
ul li:hover{ 
-webkit-transform:scale(1.5)rotate(10deg); 
-moz-transform:scale(1.5)rotate(10deg); 
-o-transform:scale(1.5)rotate(10deg); 
} 
li img{ 
width:100%; 
height:100%; 
}

The above is the details of how CSS3 uses scale() and rotate() to achieve magnification and rotation. For more information about CSS3 magnification and rotation, please pay attention to other related articles on 123WORDPRESS.COM!

<<:  MySQL quickly inserts 100 million test data

>>:  Detailed explanation of Vue mixin

Recommend

Detailed explanation of CSS style sheets and format layout

Style Sheets CSS (Cascading Style Sheets) is used...

Very practical MySQL function comprehensive summary detailed example analysis tutorial

Table of contents 1. Description of functions in ...

Detailed explanation of the basic usage of the img image tag in HTML/XHTML

The image tag is used to display an image in a we...

Analysis of the process of building a cluster environment with Apache and Tomcat

In fact, it is not difficult to build an Apache c...

Solution to the problem that VC6.0 cannot be used when installed on WIN10

VC6.0 is indeed too old VC6.0 is a development to...

Detailed explanation of how to run jmeter under Linux system and optimize local memory

1. Install the cross-system file transfer tool un...

VMware WorkStation 14 pro installation Ubuntu 17.04 tutorial

This article records the specific method of insta...

Implementation code for taking screenshots using HTML and saving them as local images

The specific code is as follows: <!DOCTYPE htm...

MySQL DML statement summary

DML operations refer to operations on table recor...

CSS hacks \9 and \0 may not work for hacking IE11\IE9\IE8

Every time I design a web page or a form, I am tr...

Detailed explanation of MySQL Innodb storage structure and storage of Null values

background: Tablespace: All INNODB data is stored...

Analysis of the project process in idea packaging and uploading to cloud service

one. First of all, you have to package it in idea...

Use Navicate to connect to MySQL on Alibaba Cloud Server

1. First enter the server's mysql to modify p...

MySQL simple example of sorting Chinese characters by pinyin

If the field storing the name uses the GBK charac...

Basic usage of UNION and UNION ALL in MySQL

In the database, both UNION and UNION ALL keyword...