旋转图片.png
直接上代码，相信大家一看就懂
html
<div id="wrap">
<div class="box">
<img src="./images/01.jpg" />
<img src="./images/02.jpg" />
<img src="./images/03.jpg" />
<img src="./images/04.jpg" />
<img src="./images/05.jpg" />
<img src="./images/06.jpg" />
<img src="./images/07.jpg" />
<img src="./images/08.jpg" />
<img src="./images/09.jpg" />
<img src="./images/10.jpg" />
<img src="./images/11.jpg" />
<img src="./images/12.jpg" />
</div>
</div>
css代码
<style>
*{
margin: 0;
padding: 0;
}
#wrap{
perspective: 900px; /*在这里开启景深，因为box也需要转动*/
}
.box{
transform-style: preserve-3d;
width: 300px;
height: 200px;
margin: 200px auto;
position: relative;
animation: rotate 10s linear infinite;
/*backface-visibility: hidden;*/ /*开启了，后半圈会看不到，因为隐藏了背面*/
}
img{
width: 300px;
height: 200px;
position: absolute;
left: 0;
top: 0;
}
@keyframes rotate {
from{
/*rotateX(-15deg) 变成一个俯视的视角*/
transform:rotateX(-15deg) rotateY(0deg);
}
to{
transform:rotateX(-15deg) rotateY(360deg);
}
}
</style>
js代码
<script>
var oImgs = document.querySelectorAll("img");
//sin/cos/tan 里面只能写弧度，故要做转换
var ImgtranslateZ = oImgs[0].offsetWidth / 2 / Math.tan(360/oImgs.length/2 * Math.PI /180);
//这里提醒一点，要先绕Y轴转，再Z轴平移，z轴始终垂直于平面
oImgs.forEach(function (item,index,arr) {
item.style.transform = "rotateY(" +index * 360 / oImgs.length+ "deg)
translateZ("+ ImgtranslateZ +"px)" ;
})
</script>
代码打包
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转相册</title>
<style>
*{
margin: 0;
padding: 0;
}
#wrap{
perspective: 900px; /*在这里开启景深，因为box也需要转动*/
}
.box{
transform-style: preserve-3d;
width: 300px;
height: 200px;
margin: 200px auto;
position: relative;
animation: rotate 10s linear infinite;
/*backface-visibility: hidden;*/ /*开启了，后半圈会看不到，因为隐藏了背面*/
}
img{
width: 300px;
height: 200px;
position: absolute;
left: 0;
top: 0;
}
@keyframes rotate {
from{
/*rotateX(-15deg) 变成一个俯视的视角*/
transform:rotateX(-15deg) rotateY(0deg);
}
to{
transform:rotateX(-15deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div id="wrap">
<div class="box">
<img src="./images/01.jpg" />
<img src="./images/02.jpg" />
<img src="./images/03.jpg" />
<img src="./images/04.jpg" />
<img src="./images/05.jpg" />
<img src="./images/06.jpg" />
<img src="./images/07.jpg" />
<img src="./images/08.jpg" />
<img src="./images/09.jpg" />
<img src="./images/10.jpg" />
<img src="./images/11.jpg" />
<img src="./images/12.jpg" />
</div>
</div>
<script>
var oImgs = document.querySelectorAll("img");
//sin/cos/tan 里面只能写弧度，故要做转换
var ImgtranslateZ = oImgs[0].offsetWidth / 2 / Math.tan(360/oImgs.length/2 * Math.PI /180);
//这里提醒一点，要先绕Y轴转，再Z轴平移，z轴始终垂直于平面
oImgs.forEach(function (item,index,arr) {
item.style.transform = "rotateY(" +index * 360 / oImgs.length+ "deg) translateZ("+ ImgtranslateZ +"px)" ;
})
</script>
</body>
</html>
