css中的transform属性

最新推荐文章于 2025-07-06 19:44:27 发布

xiao姝姝

最新推荐文章于 2025-07-06 19:44:27 发布

阅读量2.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： css 文章标签： transform rotate scale skew translate

本文链接：https://blog.youkuaiyun.com/qq_42988963/article/details/82429505

css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了CSS中变换元素位置、大小及形状的基本方法，包括translate、scale、rotate和skew等属性的使用，并展示了如何通过组合这些变换创建动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、translate(x,y)传入两个参数，第一个参数表示x轴的移动距离，第二个参数表是y轴的移动距离，传入的值可以是像素。也可以单独设置translateX或者translateY的值。

<style>
.div1{
    width: 300px;
    height: 300px;
    background: red;
}
.div2{
    width: 100px;
    height: 100px;
    background: blue;
    transform: translate(50px,50px);
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<div class="div1">
    <div class="div2"></div>
</div>

2、scale(x,y)设置元素的放大和缩小，x表示宽度的放大或者缩小的倍数，y表示高度的放大或者缩小的倍数。如果传入的值大于1表示是放大，如果传入的值小于1表示缩小元素，例如scale（2，0.8）表示将宽度放大2倍，高度缩小到原来的80%。也可以直接传入一个参数，例如将元素缩小到50%：scale（0.5）。另外也可以单独设置scaleX或者scaleY的值。

<style>
.div1{
    width: 300px;
    height: 300px;
    background: red;
}
.div2{
    width: 100px;
    height: 100px;
    background: blue;
    transform: scale(0.8,0.5);
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<div class="div1">
    <div class="div2"></div>
</div>

3、rotate(angle)用于设置元素的旋转，传入的参数是角度值，rotate也可以设置xyz三个方向的旋转（类似于将空间直角坐标系的轴作为旋转轴）。也可以单独设置rotateX、rotateY和rotateZ的值来设置旋转的轴和角度。

<style>
.div1{
    width: 300px;
    height: 300px;
    background: red;
}
.div2{
    width: 100px;
    height: 100px;
    background: blue;
    transform: rotate(45deg);
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<div class="div1">
    <div class="div2"></div>
</div>

注意：一般旋转的转轴都是以div的中心来旋转，我们可以使用transform-origin来设置转轴的方向。可以设置的值有水平方向上可以设置的值：left、center、right；竖直方向上可以设置的值：top、center、bottom。两个方向共同设置，例如：transform-origin：left top。表示以左上角为转轴。
4、skew（x,y）传入的是x轴和y轴的斜切的角度，也可以只传入一个参数，或者分别单独设置skewX或者skewY值。

<style>
.div1{
    width: 300px;
    height: 300px;
    background: red;
    transform: skew(50deg);
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<div class="div1"></div>
</body>

5、css如何利用这些属性设置动态的动画的动态效果呢？例如我们要给div设置移入旋转和移动以及放大的效果，移入的效果一般使用hover来实现，在设置时也需要给元素设置transition属性，此属性用于设置transform执行的时间和动画速度等。
代码如下：

<style>
.div1{
    width: 100px;
    height: 100px;
    background: red;
    transition:all 5s ease;//设置所有动画5秒内完成，ease设置变化速率
}
.div1:hover{
    transform: rotate(720deg) translate(100px,200px) scale(2);//同时设置属性
}
</style>
</head>
<body>
<div class="div1"></div>
</body>