In CSS3, the attribute that can achieve the scaling effect is "transform"; this attribute can be used with the scale() function to scale the element. When the parameter is set to one, it means that the entire horizontal and vertical scaling will be done. , when the parameter is set to two, it means to set the horizontal and vertical scaling multiples respectively, and the syntax is "element {transform:scale(horizontal scaling value, vertical scaling value);}".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
In css3, you can use the transform attribute in conjunction with the scale() function to achieve element scaling effects.
The transform property applies a 2D or 3D transformation to an element. This property allows us to rotate, scale, move or tilt the element.
The scale() function is used to define the 2D scaling of elements.
The syntax is as follows:
元素{transform:scale(横向缩放值,竖向缩放值);}The example is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:scale(0.5);
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of What are the properties that can achieve zoom effect in css3. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
