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); 1. scaleX(x) grammar:
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. 2. scaleY(y) grammar:
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:
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). 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).
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
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
HTML basics summary recommendation (paragraph)
HTML Paragraph Paragraphs are defined by the <...
Detailed explanation of how to build a CDN server with Nginx (picture and text)
Using Nginx's proxy_cache to build a cache se...
Detailed explanation of React component communication
Table of contents Component Communication Introdu...
Understand the rendering process of HTML pages in preparation for learning front-end performance optimization (continued)
Last night I wrote an essay about the browser ren...
Introduction to cloud native technology kubernetes (K8S)
Table of contents 01 What is Kubernetes? 02 The d...
How to solve the problem of case insensitivity in MySQL queries
question Recently, when I was completing a practi...
Vue implements a draggable tree structure diagram
Table of contents Vue recursive component drag ev...
Detailed explanation of the process of building and running Docker containers
Simply pull the image, create a container and run...
JavaScript exquisite snake implementation process
Table of contents 1. Create HTML structure 2. Cre...
The use of v-model in vue3 components and in-depth explanation
Table of contents Use two-way binding data in v-m...
JavaScript to achieve digital clock effect
This article example shares the specific code of ...
Solve the problem that docker run or docker restart will automatically exit when starting the image
Execute the command: docker run --name centos8 -d...
Implementation of code optimization for Vue2.x project performance optimization
Table of contents 1 Use of v-if and v-show 2. Dif...
MySQL cursor principle and usage example analysis
This article uses examples to explain the princip...
React Native JSI implements sample code for RN and native communication
Table of contents What is JSI What is different a...