CSS实践与技巧——72. 缩放转换 transform: scaleX（）transform: scaleY（）transform: scaleZ（）

最新推荐文章于 2025-04-10 08:00:00 发布

时间sk

最新推荐文章于 2025-04-10 08:00:00 发布

阅读量373

点赞数 3

分类专栏： CSS进阶文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/weixin_63215361/article/details/145813167

版权

CSS进阶专栏收录该内容

85 篇文章

订阅专栏

缩放转换:即将元素放大缩小

值:比例,参考自身尺寸
默认的基点在元素中心点
默认值为1，当值小于1时,表示缩小的倍数,大于1表示放大的倍数

在设置Z轴时一定要在3D的环境下才有效果
transform:rotateY(45deg);图像无效果看不出来
transform: scaleZ(3) rotateY(45deg);给Z轴带了一个偏移度，Z轴就能看出效果了

transform: scaleX(1);表示的是元素的现在的宽度，是原来的1倍，且按中心点沿着四周放大

transform: scaleX(2);表示的是元素的现在的宽度，是原来的2倍，且按中心点沿着四周放大

如下图演示
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
		<style type="text/css">
			#box{
				width: 300px;height: 300px;background: #000;
				margin: 100px auto;
				/*视距属于transform的前置属性,写在父级中*/
				perspective: 500px;
			}
			#zxw{
				width: 100px;height: 100px;background: red;
			}
			#zxw:hover{
				/*缩放转换:元素放大缩小*/
				/*值:比例,参考自身尺寸*/
				/*默认的基点在元素中心点*/
				/*默认值为1，当值小于1时,表示缩小,大于1表示放大*/
				transform: scaleX(2);
				transform: scaleX(0.5);
				
				transform: scaleY(3);
				transform: scaleY(0.5);
				
				/*transform:rotateY(45deg);*/
				transform: scaleZ(3) rotateY(45deg);
			}
			
		</style>
		
	</head>
	<body>
		
		<div id="box">
			<div id="zxw"></div>
		</div>
		
		
	</body>
</html>