2d过渡
转换是css3的颠覆性特效之一，可以进行平移，翻转，缩放，变形，甚至支持矩阵变换，取代之前flash才能实现的特效。css3的布局不会影响原来的布局。 2D过渡通常指的是在2D平面内实现的图形或图像的过渡效果。这可以通过许多方式实现，例如使用平移、缩放、旋转、淡入淡出、形状变化等。
以下是一些实现2D过渡效果的常见技术和方法：
- 平移：通过移动对象的位置来实现过渡效果，例如从左到右或从上到下平移。
- 缩放：通过增加或减小对象的大小来实现过渡效果，例如从小到大或从大到小缩放。
- 旋转：通过将对象绕中心点旋转来实现过渡效果，例如从左转到右或从上到下旋转。
- 淡入淡出：通过调整对象的透明度来实现过渡效果，例如从不透明到透明或从透明到不透明淡入淡出。
- 形状变化：通过改变对象的形状来实现过渡效果，例如从圆形变成正方形或从三角形变成梯形。
下面是一个使用CSS3实现2D过渡效果的例子，通过旋转和缩放实现一个DIV元素在鼠标悬停时的过渡效果：
HTML代码：
bashCopy code
<div id="box"></div>
CSS代码：
cssCopy code
#box {
width: 100px;
height: 100px;
background-color: blue;
transition: transform 0.5s ease-in-out;
}
#box:hover {
transform: rotate(180deg) scale(1.5);
}
在这个例子中，当鼠标悬停在#box元素上时，CSS属性transform将被过渡动画修改，使#box元素在0.5秒内以180度旋转并放大1.5倍，从而实现了过渡效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2d变换</title>
<style>
html,body,div,li, ul {
padding: 0;
margin: 0;
}
ul {
list-style: none;}
li {
width: 100px;
height: 100px;
border: 5px solid blue;
margin: 10px;
transition: all 1s linear;
}
/*translate(x,y) 向左向下平移*/
li:nth-child(1):hover {
transform: translate(10px, 10px);
}
/*scale(x,y) 缩放，先水平方向上进行缩放，再垂直方向上进行缩放*/
li:nth-child(2):hover{
transform: scale(2,0.5);
}
/*tansform-origin:设置旋转的原点 rotate(50deg)顺时针方向上旋转*/
li:nth-child(3):hover{
transform-origin: 50px 50px;
transform: rotate(50deg)
}
/*skew(x,y):式元素进行一定角度上的倾斜*/
li:nth-child(4):hover{
transform:skew(30deg,0deg) ;
}
</style>
</head>
<body>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
