一、效果图
二、源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 3D切割轮播图</title>
<style>
* {margin: 0; padding: 0;}
ul {list-style: none;}
html, body {
height: 100%;
}
body {
margin: 0;
margin: 0;
padding: 0;
background: #ffa5a5;
background: linear-gradient(to bottom, #ffa5a5 0%,#ffd3d3 100%);
}
.chest {
width: 500px;
height: 500px;
margin: 100px auto;
position: relative;
margin-left: 800px;
}
.heart {
position: absolute;
z-index: 2;
background: linear-gradient(-90deg, #F50A45 0%, #d5093c 40%);
animation: beat 0.7s ease 0s infinite normal;
}
.heart.center {
background: linear-gradient(-45deg, #B80734 0%, #d5093c 40%);
}
.heart.top {
z-index: 3;
}
.side {
top: 100px;
width: 220px;
height: 220px;
border-radius: 220px;
}
.center {
width: 210px;
height: 210px;
bottom: 100px;
left: 145px;
font-size: 0;
text-indent: -9999px;
}
.left {
left: 62px;
}
.right {
right: 62px;
}
@keyframes beat {
0% {
transform: scale(1) rotate(225deg);
box-shadow:0 0 40px #d5093c;
}
50% {
transform: scale(1.1) rotate(225deg);
box-shadow:0 0 70px #d5093c;
}
100% {
transform: scale(1) rotate(225deg);
box-shadow:0 0 40px #d5093c;
}
}
.cut {
float: left;
width: 560px;
height: 300px;
margin: 50px auto;
margin-left: 200px;
margin-top: 100px;
/**/
position: relative;
border-radius: 15px;
background-image: linear-gradient(90deg, #ff7c6e,#FF95B7, #F1FF83, #CCFF69, #EDBCFF, #41eee1);
}
.prev, .next {
display: block;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
margin-top: -30px;
font-size: 40px;
color: #FFF;
text-decoration: none;
/**/
position: absolute;
top: 50%;
}
.next {
right: 0;
}
.cut li {
width: 56px;
height: 100%;
/**/
position: absolute;
top: 0;
transition: all 1s ease-in-out;
transform-style: preserve-3d;
-webkit-background-size:cover;
}
.cut li div {
width: 100%;
height: 100%;
border-radius: 50px;
position: absolute;
top: 0;
left: 0;
}
.cut li div:nth-child(1) {
background: url("imggu/1.jpg");
/*background: url(imggu/12_02.png);*/
transform: rotateX(0deg) translateZ(150px);
background-size:cover;
}
.cut li div:nth-child(2) {
background: url(imggu/3.jpg);
transform: rotateX(-90deg) translateZ(150px);
background-size:cover;
}
.cut li div:nth-child(3) {
background: url(imggu/11_02.png);
transform: rotateX(-180deg) translateZ(150px);
background-size:cover;
}
.cut li div:nth-child(4) {
background: url(imggu/7_02.png);
transform: rotateX(-270deg) translateZ(150px);
background-size:cover;
}
</style>
<script src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function() {
$("li").each(function(index,ele) {
$(this).css({"left":560/10*index,"transition-delay":index*0.2+"s"});
$(this).children("div").css("backgroundPosition",-560/10*index+"px 0");
})
var num = 0;
$(".next").on("click",function() {
num++;
$("li").css("transform","rotateX("+num*90+"deg)");
})
$(".prev").on("click",function() {
num--;
$("li").css("transform","rotateX("+num*90+"deg)");
})
})
</script>
</head>
<body>
<div class="cut">
<ul>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
</ul>
<a href="javascript:;" class="prev"><</a>
<a href="javascript:;" class="next">></a>
</div>
<div class="chest">
<div class="heart left side top"></div>
<div class="heart center">♥</div>
<div class="heart right side"></div>
</div>
</body>
</html>