css3 图片旋转 扭曲

CSS3是一种在网页设计中非常有用的技术，其中有一项非常酷炫的特效是图片旋转和扭曲。

图片旋转是指可以通过CSS3实现对图片进行360度的旋转操作，而不需要使用JavaScript或Flash。对于需要实现视觉特效的网站设计来说，这个功能非常实用。

    img {
      transition: transform 1s;
    }
    img:hover {
      transform: rotate(360deg);
    }

上面的代码片段展示了如何以1秒的时间将图像从其原始状态旋转360度。这涉及到使用CSS3中的transform属性和transition属性。

扭曲则是把图像按照一定的弯曲方式进行改变，例如它可以被扭曲，从而使图像看起来像是沿着曲面的轨迹运行的。这需要使用CSS3中的transform属性进行变换。

    img {
      transform: skewX(30deg);
    }

上面的代码片段将图像进行了沿着x轴偏斜30度的扭曲。你可以更改偏转角度和方向来更改图像的变形效果。

不仅如此，CSS3还提供了更多变形效果，例如旋转，缩放，倾斜，透视等。使用这些效果可以轻松地实现网站设计中的多彩、丰富的视觉效果。因此，学习CSS3的图像变形效果对于网站设计人员来说是非常重要的。