Front-end——jQuery制作3D相册效果
作者：互联网
本案例使用到：
- -webkit-box-reflect 倒影：（取值：above上倒影、below下倒影、left 左倒影、right右倒影）设置两个值，即倒影的位置、距离本体的距离 注：除了谷歌内核浏览器外都不支持
- background：设置渐变色，如： -webkit-radial-gradient(center center,400px 400px,#ff62f0,rgba(0,0,0,0.1))
- box-shadow：背景倒影
- transition值的设置：可以设置两个值，第一个值是效果几秒完成，第二个值是效果何时开始
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
html{
background: #000000;
}
#app{
perspective: 1000px;
height: 200px;
width: 133px;
margin: 150px auto;
}
#app>.content{
height: 100%;
width: 100%;
position: relative;
transform-style: preserve-3d;
transform: rotateX(-20deg);
}
#app>.content>img{
position: absolute;
top:0;
left:0;
box-shadow: 1px 1px 20px #ff62f0;
border-radius: 10px;
-webkit-box-reflect: below 5px;
}
</style>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<div id="app">
<div class="content"></div>
</div>
<script>
$(function(){
for(let i = 0; i < 11; i++){
$('<img src="images/' + (i+1) + '.jpg">').css({
transform: 'rotateY(0deg) translateZ(0px)',
transition: '1s ' + (i * 0.5) + 's',
}).appendTo($('#app>.content'))
}
$('<div></div>').css({
height: '800px',
width: '800px',
'border-radius': '400px',
position: 'absolute',
top: '100%',
left: '50%',
transform: 'translateX(-50%) translateY(-50%) rotateX(90deg)',
background: '-webkit-radial-gradient(center center,400px 400px,#ff62f0,rgba(0,0,0,0.1))'
}).appendTo($('.content'))
for(let i = 0; i < 11; i++){
const r = 360 / 11 * i
$(".content>img").eq(i).css({
transform: 'rotateY('+ r +'deg) translateZ(400px)'
})
}
})
</script>
</body>
</html>
标签：jQuery,box,end,倒影,app,transform,content,Front,400px 来源： https://blog.csdn.net/weixin_42067873/article/details/112545541