前言
2D转换是CSS3中新的特性之一，其中有很多有趣的效果，如缩放，移动，旋转等。
一、缩放scale
语法：transform：scale（x,y）x和y如果没有单位，则代表倍数，小于1就是缩小
代码演示：
<style>
div {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: purple;
}
//鼠标悬停效果
div:hover {
transform: scale( 1.5, 0.7);
}
</style>
</head>
<body>
<div></div>
</body>
原始图
缩放后
在鼠标悬停使，用scale使他的宽变为1.5倍，高变为0.7倍
二、移动translate
语法：transform：translate（x，y）
若只移动x轴或y轴：transform：translateX（）和transformY（）
代码演示：
<style>
div {
width: 200px;
height: 200px;
background-color: purple;
}
div:hover {
transform: translateX(500px);
}
</style>
</head>
<body>
<div></div>
</body>
原始状态
移动后：
使用transform：translateX（500px）向右移动了500px（如果是负数则向左移）
三、旋转rotate
语法：transform：rotate（）单位为deg
代码演示：
<style>
div {
width: 150px;
height: 200px;
margin: 100px auto;
}
div img {
width: 100%;
height: 100%;
}
div:hover {
transform: rotate(90deg);
}
</style>
</head>
<body>
<div>
<img src="猪猪.jpg" alt="">
</div>
</body>
初始
旋转后
正值为顺时针旋转，负值为逆时针旋转
注：可以用transition来控制转换时间
255
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
