纯css制作旋转图片

来源：互联网发布：模拟身份证阅读器软件编辑：程序博客网时间：2024/04/29 12:48

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

具体实现代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>css制作旋转图片</title>    <style>        .img-circle{            margin: 50px;//只是为了不显示在边缘上            font-size: 50px;            text-align: center;            background-color: #3f9fdb;            width: 170px;            height: 170px;            line-height: 140px;            border: 15px solid #f0f0f0;            color: #fff;            -webkit-transition: -webkit-transform 0.4s ease-out;            -moz-transition: -moz-transform 0.4s ease-out;            transition: transform 0.4s ease-out;        }        .img-circle:hover{            background-color: #0071b8;            border: 15px solid #c9dfec;            -webkit-transform: rotate(360deg);            -moz-transform: rotate(360deg);            transform: rotate(360deg);        }    </style></head><body>    <div class="img-circle">旋转</div></body></html>

接下来进行代码的解释：

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。其取值：<time>为数值，单位为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行，即是为了解决浏览器的兼容性。

1 0