css transform几个简单的属性

最新推荐文章于 2024-12-05 19:41:11 发布

请示出回车驾照

最新推荐文章于 2024-12-05 19:41:11 发布

阅读量654

点赞数

CC 4.0 BY-SA版权

文章标签： css 动画 css3

本文详细介绍了 CSS 中 transform 属性的四个基本操作：平移、缩放、旋转和扭曲。通过具体的实例展示了如何使用 translate、scale、rotate 和 skew 方法来改变 HTML 元素的位置、大小及形状。

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

transform基本属性

平移	translate ( x , y )	x代表水平方向平移的距离，y代表垂直方向平移的距离
缩放	scale ( 缩放倍数 )	缩放倍数为一个数值，若为1则不变
旋转	rotate ( ... deg )	围绕中心点旋转，deg 代表角度单位 “ ° ”，即“度”
扭曲	skew ( ... deg , ... deg)	第一个...deg代表矩形盒子垂直边倾斜的角度（即左右边），第二个...deg代表矩形盒子水平边倾斜的角度（即上下边）

平移：translate ( x , y )

.box{
    width: 200px;
    height: 200px;
    background: blue;
}
.box:hover{
    transform: translate(300px,400px);
}

缩放：scale ( 缩放倍数 )

.box{
    width: 200px;
    height: 100px;
    background: blue;
}
.box:hover{
    transform: scale(2);
}

旋转：rotate ( ... deg )

下面这张图是上期分享过角度deg的方向

.box{
    width: 200px;
    height: 100px;
    background: blue;
}
.box:hover{
    transform: rotate(-45deg);
}

扭曲：skew ( ... deg , ... deg)

当括号里只有一个deg值时，表示的只是左右边的旋转角度，上下边仍保持不变

.box{
    width: 200px;
    height: 100px;
    background: blue;
}
.box:hover{
    transform: skew(-10deg,45deg);
}

这时候我们发现左右边旋转的角度方向不能用上期分享的角度方向图来确定了，但我们只需把上期分享的角度方向图正改为负，负改为正即可表示左右边的角度方向