CSS动画中的 transform 之 scale（缩放）

打响第一枪

已于 2024-01-31 23:16:25 修改

阅读量2.6k

点赞数 10

文章标签： css 前端

于 2024-01-31 23:13:42 首次发布

本文链接：https://blog.csdn.net/wcxrib/article/details/135963533

版权

本文详细介绍了CSS中transform属性的scale功能，包括单独X轴或Y轴缩放、等比缩放，以及缩放的限制条件。同时讨论了如何配合transition过渡和transform-origin属性实现平滑动画效果。

摘要由CSDN通过智能技术生成

分别对元素在X轴或Y轴上执行缩放操作，如果x或y的值为0到1之间的数值，则元素会缩小；如果它们的值大于1，则会放大。

1、单独沿着X轴或Y轴缩放：

transform: scaleX(x) 或 transform: scaleY(y)：分别对元素在X轴或Y轴上执行缩放操作。

/*元素按照指定值沿着 X 轴缩放*/
transform: scaleX(缩放值); 
/*元素按照指定值沿着 Y 轴缩放*/
transform: scaleY(缩放值); 
/*合并写法*/
transform: scale(x,y);

1、等比缩放：

/*只有一个参数时，表示等比例缩放，参数表示原来大小的倍数，所以当参数为1时就相当于大小没变*/
transform: scale(a);

2、缩放的限制条件：

如果x或y的值为0到1之间的数值，则元素会缩小；如果它们的值大于1，则会放大。
对行内标签不起效果。

/*元素沿着 X 轴缩小为原来的0.5倍,(相当于宽度缩小了一半)；元素沿着 Y 轴缩小为原来的0.5倍,(相当于高度缩小了一半)；*/
transform: scale(0.5, 0.5); 
/*宽高等比缩放的另一种写法*/
transform: scale(0.5);

3、缩放的优势：

可以设置缩放中心点，默认以中心点缩放的(即元素的中心点)，而且不影响其他盒子。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>scale缩放</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
<div class="flex">
  <div class="box box1"></div>
  <div class="box box2"></div>
</div>
</body>
</html>

.flex {
    display: flex;
}

.box {
    width: 200px;
    height: 200px;

}

.box1 {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.box1 {
    background-color: blue;
    transition: all 0.3s ease;
}

.box1:hover {
    transform: scale(0.5, 0.5);
    /*transform: scale(0.5);*/
    /*transform: scaleX(0.5);*/
    /*transform: scaleY(0.5);*/
}

.box2 {
    background-color: brown;
}

配合CSS动画属性：transition过渡，可以是平移更平滑，如图：
在这里插入图片描述

transform-origin：指定动画的中心点

语法：transform-origin: x-axis y-axis z-axis;
默认值：(x:50% y:50%)
参数可以是带单位的数值，百分比，关键字（left|right|bottom|top|center）
注意后面的参数 x 和 y 用空格隔开

transform-origin: 20% 20%;
/*transform-origin: center center;*/
/*transform-origin: 20px 20px;*/
/*transform-origin: left top;*/

1、CSS动画属性：transition过渡、 transform变形、animation动画
 2、CSS动画中的 transform 之 translate（平移）

打响第一枪

关注

10
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS动画中的 transform 之 scale（缩放）

分别对元素在X轴或Y轴上执行缩放操作，如果x或y的值为0到1之间的数值，则元素会缩小；如果它们的值大于1，则会放大。
复制链接

扫一扫