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

Examples of using && and || operators in javascript

Table of contents Preface && Operator || ...

Migrate virtual machines between VMware Workstation and vSphere (picture and text)

1. Change the virtual machine hardware version in...

Solution to the "No such file or directory" prompt when executing executable files in Linux

Recently, when I was using the Linux operating sy...

Five solutions to cross-browser problems (summary)

Brief review: Browser compatibility issues are of...

Vue implements weather forecast function

This article shares the specific code of Vue to r...

MySQL independent index and joint index selection

There is often a lack of understanding of multi-c...

A brief analysis of the issues that should be paid attention to when making 404 error pages

When optimizing a website, we must learn to use e...

Detailed explanation of redis5 cluster construction and usage under Linux (Centos7)

Table of contents 1. Brief description 2. Steps t...

MySQL configuration SSL master-slave replication

MySQL5.6 How to create SSL files Official documen...

How to check whether a port is occupied in LINUX

I have never been able to figure out whether the ...

A detailed guide to custom directives in Vue

Table of contents 1. What is a custom instruction...

The complete process of iptables rules in Docker being lost after iptables restart

Causes and consequences 1. When using the ansible...

Detailed explanation of slots in Vue

The reuse of code in vue provides us with mixnis....

Analysis of the Principle and Function of MySQL Database Master-Slave Replication

Table of contents 1. Database master-slave classi...

VSCode Development UNI-APP Configuration Tutorial and Plugin

Table of contents Written in front Precautions De...