<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css3 3D广告</title>
<script src="js/jquery.1.9.0.min.js"></script>
<style>
img {
width:300px;
height:200px;
}
section div {
position:absolute;
top:0px;
left:0px;
width:300px;
height:200px;
}
</style>
</head>
<body>
<div style="position:relative;margin:0 auto;width:300px;">
<section>
<!-- backface-visibility 属性可用于隐藏内容的背面。默认情况下，背面可见，
这意味着即使在翻转后，变换的内容仍然可见。但当 backface-visibility
设置为 hidden 时，旋转后内容将隐藏，因为旋转后正面将不再可见。-->
<div style="-webkit-transition:-webkit-transform 0.8s ease;-webkit-backface-visibility:hidden;
-webkit-transform:rotate3d(0,1,0,180deg);">
<a href="#">
<img src="images/di%20(1).jpg" />
</a>
</div>
<div style="-webkit-transition:-webkit-transform 0.8s ease;-webkit-backface-visibility:hidden;
-webkit-transform:rotate3d(0,1,0,0deg);">
<a href="#">
<img src="images/di%20(2).jpg" />
</a>
</div>
</section>
</div>
</body>
<script>
var sign = 0;
setInterval(function () {
if (sign % 2 == 0) {
$("section").find("div").eq(0).css("-webkit-transform", "rotate3d(0,1,0,0deg)");
$("section").find("div").eq(1).css("-webkit-transform", "rotate3d(0,1,0,180deg)");
} else {
$("section").find("div").eq(0).css("-webkit-transform", "rotate3d(0,1,0,180deg)");
$("section").find("div").eq(1).css("-webkit-transform", "rotate3d(0,1,0,0deg)");
}
sign++;
}, 2000)
</script>
</html>
浙公网安备 33010602011771号