旋轉(zhuǎn)圖片.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; /*在這里開啟景深侈玄，因?yàn)閎ox也需要轉(zhuǎn)動(dòng)*/
}
.box{
transform-style: preserve-3d;
width: 300px;
height: 200px;
margin: 200px auto;
position: relative;
animation: rotate 10s linear infinite;
/*backface-visibility: hidden;*/ /*開啟了氓侧，后半圈會(huì)看不到祥国，因?yàn)殡[藏了背面*/
}
img{
width: 300px;
height: 200px;
position: absolute;
left: 0;
top: 0;
}
@keyframes rotate {
from{
/*rotateX(-15deg) 變成一個(gè)俯視的視角*/
transform:rotateX(-15deg) rotateY(0deg);
}
to{
transform:rotateX(-15deg) rotateY(360deg);
}
}
</style>
js代碼
<script>
var oImgs = document.querySelectorAll("img");
//sin/cos/tan 里面只能寫弧度培他，故要做轉(zhuǎn)換
var ImgtranslateZ = oImgs[0].offsetWidth / 2 / Math.tan(360/oImgs.length/2 * Math.PI /180);
//這里提醒一點(diǎn)绸罗，要先繞Y軸轉(zhuǎn)荒典，再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>旋轉(zhuǎn)相冊(cè)</title>
<style>
*{
margin: 0;
padding: 0;
}
#wrap{
perspective: 900px; /*在這里開啟景深，因?yàn)閎ox也需要轉(zhuǎn)動(dòng)*/
}
.box{
transform-style: preserve-3d;
width: 300px;
height: 200px;
margin: 200px auto;
position: relative;
animation: rotate 10s linear infinite;
/*backface-visibility: hidden;*/ /*開啟了寺董，后半圈會(huì)看不到覆糟，因?yàn)殡[藏了背面*/
}
img{
width: 300px;
height: 200px;
position: absolute;
left: 0;
top: 0;
}
@keyframes rotate {
from{
/*rotateX(-15deg) 變成一個(gè)俯視的視角*/
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 里面只能寫弧度，故要做轉(zhuǎn)換
var ImgtranslateZ = oImgs[0].offsetWidth / 2 / Math.tan(360/oImgs.length/2 * Math.PI /180);
//這里提醒一點(diǎn)遮咖，要先繞Y軸轉(zhuǎn)滩字，再Z軸平移，z軸始終垂直于平面
oImgs.forEach(function (item,index,arr) {
item.style.transform = "rotateY(" +index * 360 / oImgs.length+ "deg) translateZ("+ ImgtranslateZ +"px)" ;
})
</script>
</body>
</html>
