正文
CSS3——3D翻转相册
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
transform属性和transition过渡属性，结合jQuery代码实现翻转功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3d翻转相册</title>
<script src="jquery-3.0.0.min.js"></script>
<style>
.container {
position: relative;
width: 560px;
height: 380px;
margin: 0 auto;
}
.items {
height: 100%;
margin: 100px auto;
transform-style: preserve-3d;
/*实现自动翻转效果，这里只设置翻转一次*/
animation: autoMove 3s 1 linear;
/*点击翻转 过渡效果*/
transition: all 0.5s;
}
.item {
width: 100%;
height: 100%;
position: absolute;
border: 1px solid #c18;
font-size: 50px;
}
/*设置不同的bgc，方便区分*/
.item:nth-child(1) {
/*background-image: url("images/01.jpg");*/
background-color: #cc1188;
}
.item:nth-child(2) {
/*background-image: url("images/02.jpg");*/
background-color: #0094ff;
}
.item:nth-child(3) {
/*background-image: url("images/03.jpg");*/
background-color: #22ff22;
}
.item:nth-child(4) {
/*background-image: url("images/04.jpg");*/
background-color: #666666;
}
/*定义动画*/
@keyframes autoMove {
from { }
to {
transform: rotateX(360deg);
}
}
/*设置左右翻页箭头样式*/
.left, .right {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
color: white;
font-size: 50px;
background-color: darkslategray;
opacity: .5;
position: absolute;
top: 50%;
margin-top: -25px;
cursor: pointer;
}
.left {
left: -25px;
}
.right {
right: -25px;
}
</style>
<script>
$(function () {
var itemNum = $(".items>.item").length;
var itemDeg = 360 / itemNum;
$(".items .item").each(function (index, element) {
$(element).css({
transform: "rotateX(" + index * itemDeg + "deg) translateZ(190px)"
});
});
var count = 0;//记录点击的次数，右击加1，左击减1
$(".container .arrow .right").click(function () {
count++;
$(".items").css({
transform: "rotateX("+-90*count+"deg)"
}); });
$(".container .arrow .left").click(function () {
count--;
$(".items").css({
transform: "rotateX("+-90*count+"deg)"
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<div class="arrow">
<div class="left"><</div>
<div class="right">></div>
</div>
</div>
</body>
</html>
