CSS3图片旋转放大、旋转缩小效果

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一个纯CSS3图片旋转放大、旋转缩小效果</title>
<style type="text/css">
@media all{*{margin: 0;padding: 0;}
html{overflow-y: scroll;}
body{font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;font-size: 62.5%;color: #222;}
.center{width: 1000px;margin: 0 auto;}
#page{}
#content{background: #fff;padding: 10px 0 10px 0;}
#content-left{width: 700px;margin: 0 20px 0 0;float: left;}
#content-right{width: 280px;float: left;}
#content-right a{float: left;padding-right: 10px;display: block;width: 125px;height: 125px;}
#footer{background: #eee;border-top: 1px solid #ccc;padding: 10px 0;}
#footer1, #footer2, #footer3{width: 300px;float: left;margin: 0 30px 0 0;}
#footer3{width: 330px;margin-right: 0;}
abbr{border-bottom: 1px dotted #ccc;cursor: help;}
blockquote{background: #eee;margin: 0 20px;padding: 10px 20px;}
code{font-family: 'Consolas', 'Monaco', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;}
h1{font-size: 4.3em;margin: 0 0 20px 0;}
h2{font-size: 2.8em;}
h1, h2, h3, h6{font-weight: normal;font-family: "Droid Serif",Cambria,Georgia,Palatino,"Palatino Linotype","Myriad Pro",Serif;}
h3, h6{font-size: 2em;}
h6{padding: 0 0 5px 0;}
label,select,input[type='submit'],.point{cursor: pointer;}
li{}
li,p{line-height: 19px;margin-top: 5px;}
ol, ul{padding: 0 0 10px 35px;}
p{margin: 5px 0 14px 0;font-size: 1.2em;line-height: 1.8em;}
textarea,input[type='text'], input[type='email'], input[type='password']{border: 1px solid #ccc;padding: 5px;font-size: 120%;font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;}
.clear{clear: both;}
.exhead{background: #e8f0f6;border-top: 1px solid #fff;color: #000;padding: 10px 10px;font-size: 120%;}
.exhead a{color: #6D84B4;}
.intro{background: #ffd987;font-style: italic;padding: 5px 10px;margin-bottom: 20px;}
.relative{position: relative;}
a{color: #3b5998;}
a: link, a: visited{text-decoration: underline;}
a: hover, a: active{text-decoration: none;}
a img{border: 0;}
@-webkit-keyframes rotater {
	0% {
	-webkit-transform: rotate(0) scale(1) }
50% {
	-webkit-transform: rotate(360deg) scale(2) }
100% {
	-webkit-transform: rotate(720deg) scale(1) }
}	a.advert {
	width: 125px;
	height: 125px;
	display: block;
	text-indent: -3000px;
}
a.advert: hover {
	/* safari / chrome*/
	-webkit-animation-name: rotater;
	-webkit-animation-duration: 500ms;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-out;
	/* mozilla*/
	-moz-transform: rotate(360deg) scale(2);
	-moz-transition-duration: 500ms;
	-moz-transition-timing-function: ease-out;
	/* opera*/
	-o-transform: rotate(360deg) scale(2);
	-o-transition-duration: 500ms;
	-p-transition-timing-function: ease-out;
	/* ie*/
	-ms-transform: rotate(360deg) scale(2);
	-ms-transform-duration: 500ms;
	-ms-transform-timing-function: ease-out;
}
</style>
</head>
<body>
<div id="content"><div class="center">
<div id="content-left">
<h1 style="margin-top:20px;">Create a Spinning, Zooming Effect with CSS3 Example</h1>	
<p>移动鼠标到图片上之后，可看到图片旋转且放大显示，精彩的CSS3！</p>
<div style="width:125px;float:left;overflow:hidden;height:125px;margin-right:20px;"><a href="#" class="advert" style="background:url(//ku.shouce.ren/files/images/201601/56a34a13a0bb9.jpg) 0 0 no-repeat;">David Walsh Blog</a></div>
<div style="width:125px;float:left;overflow:hidden;height:125px;"><a href="#" class="advert" style="background:url(//ku.shouce.ren/files/images/201601/56a34a1422687.jpg) 0 0 no-repeat;">David Walsh Blog</a></div>
<div style="clear:both;"></div>
</div>
<div class="clear"></div>
</div></div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

CSS3图片旋转放大、旋转缩小效果

分类

图片代码

描述

一个基于CSS3的图片放大效果例子，挺棒的CSS3特效代码，图片放大+图片旋转。当你把鼠标放在图片上的时候，图片就会被放大显示，且图片是旋转着被放大，图片是我随便弄的，有兴趣的朋友，可找两张更适合的图片，效果一定更炫。