首页 > html+css >正文

css变换效果(transform)

发布时间：2024-08-27 11:15 作者：一友画

transform变换效果

一、css移动translate

a）语法：transform: translate(值1,值2);

取值：第一个值代表横向移动的像素，第二个值代表纵向移动的像素

案例代码示例：
```
<style type="text/css">
div{width: 100px;height: 100px;background: #f00;}
div:hover{transform:translate(10px,0px);}
</style>
<div></div>
```
案例
二、css旋转rotate

b）语法：transform: rotate(角度);transform-origin: 横向坐标纵向坐标;

取值：
1.角度写法：数字deg
横向坐标和纵向坐标确定旋转的圆心，可以是像素，也可以是关键字（left,right,top,bottom,center），不设置的话，旋转的圆心默认是中心点

案例代码示例：
```
<style type="text/css">
div{width: 100px;height: 100px;background: #f00;}
div:hover{transform:rotate(45deg);}
</style>
<div></div>
```
案例
三、css缩放scale

c）语法：transform: scale(值);

取值：倍数，可以是整数，也可以是小数

案例代码示例：
```
<style type="text/css">
div{width: 100px;height: 100px;background: #f00;}
div:hover{transform:scale(1.1);}
</style>
<div></div>
```
案例

以上内容，在整理时难免有疏漏错误之处，如有发现，可以通过顶部的“联系站长”提出反馈，感谢您的支持！