纯css制作旋转图片

       看到一个不错的网站上制作了一个可以360旋转的图片，感觉效果不错，于是就自己用css制作了一个，效果图如下：

     具体实现代码如下：

    
    
    


    
旋转

      接下来进行代码的解释：

      1）在样式表中，大家可以看到下面三行的代码，transition是一个过渡属性，创建过程为：在默认样式中声明元素的初始状态样式；声明过渡元素的最终样式；在初始状态样式中添加过渡函数。

-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
transition: transform 0.4s ease-out;

        transition主要包含的属性有：

transition-property  指定过渡或动态模拟的CSS属性
transition-duration  指定完成过渡所需要的时间
transition-timing-function  指定过渡函数
transition-delay  指定过渡开始出现的延迟时间

        transition-delay属性用来定义延迟时间，也就是说改变元素属性值之后多长时间开始执行过渡效果，默认为0。其取值：为数值，单位为s（秒）或者ms(毫秒)，其使用和transition-duration极其相似，也可以作用于所有元素，包括:before和:after伪元素。

       trabsition-timing-function属性指定某种指代过渡的”缓动函数“。可以将属性值设置为单一过渡函数、三次贝塞尔曲线和阶梯函数。其中的ease-out为单一过渡函数，其他的单一过渡属性有：

1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

2） 在样式表中，大家可以看到下面三行的代码，transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

 -webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 transform: rotate(360deg);

以下是transform的所有属性：

本文中用到了rotate()方法，即进行2D旋转。

值得注意的是，并不是所有的浏览器都支持这个属性，Internet Explorer 10、Firefox、Opera 支持 transform 属性。Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。Opera 只支持 2D 转换。所以，我在代码中写了3行，即是为了解决浏览器的兼容性。