CSS3 是现代网页设计中必不可少的技术之一。它提供了各种新奇的效果和动画，例如将 div 元素扭曲成各种形状。

/* CSS3 扭曲 div */
div {
width: 200px;
height: 200px;
-webkit-transform: skew(30deg, 20deg);
-moz-transform: skew(30deg, 20deg);
-ms-transform: skew(30deg, 20deg);
transform: skew(30deg, 20deg);
background-color: #cc0000;
color: #fff;
text-align: center;
line-height: 200px;
}

上述代码中，使用 transform 属性对 div 元素进行扭曲。这里的 skew() 函数可以接受两个参数，分别表示水平方向和垂直方向的扭曲角度。可以根据需要调整这两个角度的大小，制作出不同的扭曲效果。

这种扭曲效果在网页设计和动画中广泛应用，可以制作出很多有趣而又炫酷的效果。例如，可以制作出带有透视感的卡片翻转效果，或是将 div 元素扭曲成波浪形、棱柱形、螺旋形、镜像形等多种形状。

总之，CSS3 的扭曲效果为网页设计和动画提供了更加丰富的表现形式，让网页设计师和动画师可以更加自由地发挥想象力，创作出更加吸引人的作品。