css3新增2d

CSS3是CSS的最新版本，它引入了许多新增特性，其中就包括了2D转换效果。2D转换可以用于创建漂亮的效果，比如图片的旋转、缩放、平移和倾斜等等。下面我们就来看看CSS3新增的2D转换效果。

 transform: translateX(50px); /* 水平平移50像素 */
 transform: translateY(50px); /* 垂直平移50像素 */
 transform: rotate(45deg); /* 旋转45度 */
 transform: scale(2); /* 将元素放大两倍 */
 transform: skewX(45deg); /* X轴倾斜45度 */
 transform: skewY(45deg); /* Y轴倾斜45度 */ 

以上代码是2D转换的基本语法，可以通过设置元素的transform属性来进行平移、旋转、缩放和倾斜等操作。translateX和translateY可以分别进行水平和垂直方向的平移，rotate可以实现旋转效果，scale可以放大缩小元素，skewX和skewY可以进行X轴和Y轴的倾斜。此外，还有一个transform-origin属性可以设置元素的变换基点。

下面我们来看几个具体的例子：

 .box{
   width: 100px;
   height: 100px;
   background-color: #f00;
   transform: rotate(45deg);
 }

 .box1{
   width: 50px;
   height: 50px;
   background-color: #0f0;
   transform: translate(50px,50px);
 }

 .box2{
   width: 50px;
   height: 50px;
   background-color: #00f;
   transform: scale(2);
 } 

以上代码分别展示了旋转、平移和缩放效果。通过设置元素的transform属性，可以轻松地实现这些效果。

CSS3的2D转换效果是一种非常强大的工具，可以使网页变得更加生动，增强用户体验。在实际应用中，可以结合JavaScript等技术实现更加复杂的效果。