css3设置2d变形 |css左边根据类容右边自适应

/* 旋转效果 */
.rotate {
transform: rotate(45deg);
}
/* 缩放效果 */
.scale {
transform: scale(1.5);
}
/* 倾斜效果 */
.skew {
transform: skew(-20deg, 10deg);
}
/* 移动效果 */
.translate {
transform: translate(50px, 20px);
}

以上代码中，transform属性用于设置元素的变形效果，分别设置了旋转、缩放、倾斜和移动效果，使用不同的数值可以调整效果的大小以及方向。同时，还可以应用多个变形效果，以创建更加复杂的动态效果。

除了单个元素的变形外，还可以使用伪类来实现更加复杂的变形效果，例如下面的代码实现了点击按钮后，一个方块会从右侧飞入并旋转、缩放、倾斜并最终消失的效果。

/* 点击按钮后的变形效果 */
button:active + .box {
animation: fly 1s ease-out forwards;
}
@keyframes fly {
0% {
transform: translateX(200px) rotate(0) scale(1) skew(0);
opacity: 1;
}
50% {
transform: translateX(50px) rotate(180deg) scale(3) skew(-20deg);
}
100% {
transform: translateX(-200px) rotate(360deg) scale(1) skew(0);
opacity: 0;
}
}

上述代码中，使用了CSS3的动画效果来实现复杂的变形效果，通过设置关键帧实现多种动作的同时进行，最终呈现出一个生动的动态效果。

总之，CSS3提供了多种2D变形效果，使得网页的动态效果更加多样化、生动化。在设计网页时，可以根据需求使用不同的变形效果来实现自己想要的效果。