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

How to use Docker to build a tomcat cluster using nginx (with pictures and text)

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

How to use Docker to build a tomcat cluster using nginx (with pictures and text)

Learn how to write neat and standard HTML tags

CSS achieves the effect of hiding the scroll bar and scrolling the content (three ways)

56 practical JavaScript tool functions to help you improve development efficiency

Display ellipsis effect when table cell content exceeds (implementation code)

Nginx access log and error log parameter description

Design and implementation of supermarket commodity management system based on Mysql+JavaSwing

mysql 5.7.17 winx64.zip installation and configuration method graphic tutorial

CSS realizes the speech bubble effect with sharp corners in the small sharp corner chat dialog box

Three methods of inheritance in JavaScript

Recommend

How to start jar package and run it in the background in Linux

Detailed installation and use tutorial of mysql 8.0.15 under windows

How to start and restart nginx in Linux

A brief discussion on the display modes of HTML tags (block-level tags, inline tags, inline block tags)

How to change the domestic image source for Docker

JavaScript implements cool mouse tailing effects

Using js to achieve waterfall effect

Practical method of deleting a row in a MySql table

Detailed explanation of the marquee attribute in HTML

How to solve the problem of -bash: /usr/bin/yum: No such file or directory after typing yum in linux

How to make spaces have the same width in IE and FF?

How to build a new image based on an existing image in Docker

Detailed process of installing and deploying onlyoffice in docker

How to deploy multiple Vue projects under the same domain name using nginx and use reverse proxy

How to use the HTML form attributes readonly and disabled