css3配合jq的3d立体跑马灯幻灯片

最新推荐文章于 2023-04-02 22:57:46 发布

daily886

最新推荐文章于 2023-04-02 22:57:46 发布

阅读量436

点赞数

分类专栏： css jq 文章标签： css3

本文链接：https://blog.csdn.net/daily886/article/details/78612834

版权

css 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D旋转</title>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.container{
margin:0 auto;
width:800px;
height:900px;
perspective:1000px;
-webkit-perspective:1000px;
position:relative;
}
.items{
top:300px;
left:300px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition:all 0.5s;
-webkit-transition:all 0.5s;
position: absolute;
width:200px;
height:300px;
}
.item{
text-align:center;
line-height:300px;
width:200px;
height:300px;
position: absolute;
bottom: 0;
box-shadow: 0px 10px 24px #000 inset, 0 10px 63px #000;
cursor: pointer;
border-radius:9px;
opacity:0.7;
filter:alpha(opacity=70);

}
.items div:nth-child(1){
background:green;
transform: rotateY( 0deg ) translateZ(280.8px);
-webkit-transform: rotateY( 0deg ) translateZ(280.8px);
}
.items div:nth-child(2){
background:red;
transform: rotateY( 60deg ) translateZ(280.8px);
-webkit-transform: rotateY( 60deg ) translateZ(280.8px);
}
.items div:nth-child(3){
background:blue;
transform: rotateY( 120deg ) translateZ(280.8px);
-webkit-transform: rotateY( 120deg ) translateZ(280.8px);
}
.items div:nth-child(4){
background:purple;
transform: rotateY( 180deg ) translateZ(280.8px);
-webkit-transform: rotateY( 180deg ) translateZ(280.8px);
}
.items div:nth-child(5){
background:orange;
transform: rotateY( 240deg ) translateZ(280.8px);
-webkit-transform: rotateY( 240deg ) translateZ(280.8px);
}
.items div:nth-child(6){
background:aqua;
transform: rotateY( 300deg ) translateZ(280.8px);
-webkit-transform: rotateY( 300deg ) translateZ(280.8px);
}
</style>

</head>
<body>
<div class="container">
<div class="items" data-rotateY="0">
<div class="item" data-rotateY="0" style="opacity:100;filter:alpha(opacity=100)">1</div>
<div class="item" data-rotateY="60">2</div>
<div class="item" data-rotateY="120">3</div>
<div class="item" data-rotateY="180">4</div>
<div class="item" data-rotateY="240">5</div>
<div class="item" data-rotateY="300">6</div>
</div>
</div>
<script>

$('.item').click(function(){
var index = $(this).index();//获取当前元素的下标
var eledeg = $(this).attr("data-rotateY"); //获取当前元素的角度
if(eledeg == 0){return;} //0度不旋转
var parentdeg = parseInt($('.items').attr("data-rotateY")); //获取父元素旋转了多少角度

if(eledeg >= 0 && eledeg <= 180){ //当角度是 0 - 180度时，从右往左旋转
var num = -eledeg; //从右往左旋转是负数
num = eval(num+parentdeg); //加上父元素旋转角度
$('.items').attr("data-rotateY",num);
$('.items').css("transform","rotateY("+num+"deg)");
}else{ //当角度是 > 180 度时，从左往右旋转
var num = 360-eledeg;
num = eval(num+parentdeg);
$('.items').attr("data-rotateY",num);
$('.items').css("transform","rotateY("+num+"deg)");
}


//重置元素角度，以当前元素为基准
$('.item').each(function(i,ele){ //根据当前元素的下标，重置data-rotateY
$('.item').eq(i).css('opacity',0.7); //改变元素透明度
$('.item').eq(i).css('filter',"alpha(opacity=70)");//改变元素透明度

var newdeg;
$('.item').eq(index).attr('data-rotateY',"0"); //当前元素的角度变成0
if(i < index){ //元素下标小于index时
newdeg = 360-(index-i)*60;
$('.item').eq(i).attr('data-rotateY',newdeg);
}else if(i > index){ //元素下标大于index时
newdeg = (i-index)*60;
$('.item').eq(i).attr('data-rotateY',newdeg);
}
})

//改变元素透明度
$(this).css('opacity',1);
$(this).css('filter',"alpha(opacity=100)");


})
</script>
</body>
</html>