您的位置：首页 > Web前端 > CSS

跑马灯效果（css3,3d变换）

2016-10-31 14:18 405 查看

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<style type="text/css">
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
background: url(img/bj.jpg) no-repeat;
background-size: 100% 100%;
}
.screen {
perspective: 800px;
height: 100%;
width: 100%;
margin-top: 0px;
}
.direction {
transform-style: preserve-3d;
transition: all 1s;
width: 236px;
height: 100px;
margin-left: -64px;
position: absolute;
left: 45%;
top: 459px;
}
.direction img {
max-width: 236px;
height: 326px;
position: absolute;
bottom: 0;
box-shadow: 0px 10px 24px #000 inset, 0 10px 63px #000;
cursor: pointer;
border-radius:9px;
}
.title{ width:300px; height:auto; position:absolute; bottom:140px; left:38%;
}
.direction img:nth-child(1) {
transform: rotateY( 0deg ) translateZ(280.8px);
}
.direction img:nth-child(2) {
transform: rotateY( 60deg ) translateZ(280.8px);
}
.direction img:nth-child(3) {
transform: rotateY( 120deg ) translateZ(280.8px);
}
.direction img:nth-child(4) {
transform: rotateY( 180deg ) translateZ(280.8px);
}
.direction img:nth-child(5) {
transform: rotateY( 240deg ) translateZ(280.8px);
}
.direction img:nth-child(6) {
transform: rotateY( 300deg ) translateZ(280.8px);
}
</style>
</head>

<body>
<div  class="screen" >
<div class="direction"> <img src="img/1.jpg"> <img src="img/2.jpg"> <img src="img/3.jpg"> <img src="img/4.jpg"> <img src="img/5.jpg"> <img src="img/6.jpg"> </div>
</div>
<img class="title" src="img/1.png">
<script>
var i=1;
$('img').click(function(){
$('.direction').css("transform","rotateY("+60*i+"deg)");
i++;
})
</script>
</body>
</html>

效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航