查看: 3872|回复: 0

[文章教程] HTML5 360图片旋转特效

[复制链接]
ttasp 发表于 2015-5-8 10:40:41 | 显示全部楼层 |阅读模式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>CSS3鼠标悬停360度旋转效果</title>
<style>
* {

margin:0;

padding:0;

list-style:none;
}
body {

background:#1F1F1F;
}
.zzsc {

width: 220px;

height: 220px;

margin: 0 auto;

background: no-repeat url("/jscss/demoimg/201405/author.jpg") left top;

-webkit-background-size: 220px 220px;

-moz-background-size: 220px 220px;

background-size: 220px 220px;

-webkit-border-radius: 110px;

border-radius: 110px;

-webkit-transition: -webkit-transform 2s ease-out;

-moz-transition: -moz-transform 2s ease-out;

-o-transition: -o-transform 2s ease-out;

-ms-transition: -ms-transform 2s ease-out;
}
.zzsc:hover {

-webkit-transform: rotateZ(360deg);

-moz-transform: rotateZ(360deg);

-o-transform: rotateZ(360deg);

-ms-transform: rotateZ(360deg);

transform: rotateZ(360deg);
}
</style>
</head>
<body>
<div class="zzsc"></div>
<div style="text-align:center;clear:both;">
</div>
</body>
</html>


一个用HTML5/css3写成的图片旋转特效,鼠标放上后图片就开始不停的旋转,对CSS3动画效果感兴趣的,更不可错过哦,用CSS3实现动画效果很不错的范例。
您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表

在线客服

售前咨询
售后咨询
服务热线
023-58418553
微信公众号