案例動畫 Gif 動畫地址，圖片太大傳不上來！
文章來源：http://www.zghlxwxcb.cn/news/detail-799433.html
案例 DEMO 源碼地址 ，僅供參考。文章來源地址http://www.zghlxwxcb.cn/news/detail-799433.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body {
/* 禁止?jié)L動 */
overflow: hidden;
/* 觸摸設(shè)備上瀏覽器不會對觸摸事件做任何處理，所有觸摸事件都會被忽略 */
touch-action: none;
/* 禁止選中 */
user-select: none;
/* 清空所有狀態(tài) */
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #000;
}
body {
/* 控制好攝像頭位置 */
perspective: 500px;
perspective-origin: center;
}
.box {
transform-style: preserve-3d;
height: 100%;
/* 傾斜一點 */
transform: rotateX(-30deg);
}
.box-imgs {
transform-style: preserve-3d;
/* 用于內(nèi)部圖片坐標(biāo)全部歸零，好進(jìn)行布局 */
position: relative;
/* 為了居中 */
margin: auto;
/* 這里的寬高是為了給下面 img 的寬高 100% 用的，可以調(diào)整去掉，設(shè)置到圖片本身上去 */
width: 120px;
height: 140px;
/* 自動旋轉(zhuǎn) */
animation: autoRotate 200s infinite linear;
}
.box-imgs:not(:first-child) {
margin-top: 6px;
}
.box-imgs img {
transform-style: preserve-3d;
/* 坐標(biāo)歸零 */
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.box-imgs:last-child img {
/* 倒影，如果有多層照片疊加，可以考慮只設(shè)置最底下一排有倒影 */
-webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005);
}
@keyframes autoRotate {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<!-- 父容器 -->
<div class="box" id="box">
<!-- 第一排 -->
<div class="box-imgs" id="box-imgs1">
<!-- 第一排中的圖片 -->
<img src="img/1.webp">
<img src="img/2.webp">
<img src="img/3.webp">
<img src="img/4.webp">
<img src="img/6.webp">
<img src="img/7.webp">
<img src="img/8.webp">
<img src="img/1.webp">
<img src="img/2.webp">
<img src="img/3.webp">
<img src="img/4.webp">
<img src="img/6.webp">
<img src="img/7.webp">
<img src="img/8.webp">
<img src="img/1.webp">
<img src="img/2.webp">
<img src="img/3.webp">
<img src="img/4.webp">
<img src="img/6.webp">
<img src="img/7.webp">
<img src="img/8.webp">
<img src="img/1.webp">
<img src="img/2.webp">
<img src="img/3.webp">
<img src="img/4.webp">
<img src="img/6.webp">
<img src="img/7.webp">
<img src="img/8.webp">
</div>
<!-- 第二排 -->
<div class="box-imgs" id="box-imgs2">
<!-- 第二排中的圖片 -->
<img src="img/1.webp">
<img src="img/2.webp">
<img src="img/3.webp">
<img src="img/4.webp">
<img src="img/6.webp">
<img src="img/7.webp">
<img src="img/8.webp">
<img src="img/1.webp">
<img src="img/2.webp">
<img src="img/3.webp">
<img src="img/4.webp">
<img src="img/6.webp">
<img src="img/7.webp">
<img src="img/8.webp">
<img src="img/1.webp">
<img src="img/2.webp">
<img src="img/3.webp">
<img src="img/4.webp">
<img src="img/6.webp">
<img src="img/7.webp">
<img src="img/8.webp">
<img src="img/1.webp">
<img src="img/2.webp">
<img src="img/3.webp">
<img src="img/4.webp">
<img src="img/6.webp">
<img src="img/7.webp">
<img src="img/8.webp">
</div>
<!-- 第三排 -->
<div class="box-imgs" id="box-imgs3">
<!-- 第三排中的圖片 -->
<img src="img/1.webp">
<img src="img/2.webp">
<img src="img/3.webp">
<img src="img/4.webp">
<img src="img/6.webp">
<img src="img/7.webp">
<img src="img/8.webp">
<img src="img/1.webp">
<img src="img/2.webp">
<img src="img/3.webp">
<img src="img/4.webp">
<img src="img/6.webp">
<img src="img/7.webp">
<img src="img/8.webp">
<img src="img/1.webp">
<img src="img/2.webp">
<img src="img/3.webp">
<img src="img/4.webp">
<img src="img/6.webp">
<img src="img/7.webp">
<img src="img/8.webp">
<img src="img/1.webp">
<img src="img/2.webp">
<img src="img/3.webp">
<img src="img/4.webp">
<img src="img/6.webp">
<img src="img/7.webp">
<img src="img/8.webp">
</div>
<!-- 第四排 -->
<div class="box-imgs" id="box-imgs4">
<!-- 第四排中的圖片 -->
<img src="img/1.webp">
<img src="img/2.webp">
<img src="img/3.webp">
<img src="img/4.webp">
<img src="img/6.webp">
<img src="img/7.webp">
<img src="img/8.webp">
<img src="img/1.webp">
<img src="img/2.webp">
<img src="img/3.webp">
<img src="img/4.webp">
<img src="img/6.webp">
<img src="img/7.webp">
<img src="img/8.webp">
<img src="img/1.webp">
<img src="img/2.webp">
<img src="img/3.webp">
<img src="img/4.webp">
<img src="img/6.webp">
<img src="img/7.webp">
<img src="img/8.webp">
<img src="img/1.webp">
<img src="img/2.webp">
<img src="img/3.webp">
<img src="img/4.webp">
<img src="img/6.webp">
<img src="img/7.webp">
<img src="img/8.webp">
</div>
</div>
<script>
// =================================================== 入門示例 - 正常自動旋轉(zhuǎn)
// 照片墻圓弧半徑
let radius = 560;
// 每排容器
let boxImgs1 = document.getElementById('box-imgs1');
let boxImgs2 = document.getElementById('box-imgs2');
let boxImgs3 = document.getElementById('box-imgs3');
let boxImgs4 = document.getElementById('box-imgs4');
// 每排容器中的所有圖片
let imgs1 = Array.from(boxImgs1.getElementsByTagName('img'))
let imgs2 = Array.from(boxImgs2.getElementsByTagName('img'))
let imgs3 = Array.from(boxImgs3.getElementsByTagName('img'))
let imgs4 = Array.from(boxImgs4.getElementsByTagName('img'))
// 設(shè)置圓弧傾斜角度
function setStyle(dom, i, len, delayTime) {
dom.style.transform = `rotateY(${i * (360 / len)}deg) translateZ(${radius}px)`;
// 縮放調(diào)整額外在追加一些動畫
// dom.style.transition = 'transform 1s';
// dom.style.transitionDelay = `${delayTime || (len - i) / 4}s`
}
// 刷新一遍位置
function reloadStyle() {
for (let i = 0; i < imgs1.length; i++) {
setStyle(imgs1[i], i, imgs1.length, 0)
}
for (let i = 0; i < imgs2.length; i++) {
setStyle(imgs2[i], i, imgs2.length, 0)
}
for (let i = 0; i < imgs3.length; i++) {
setStyle(imgs3[i], i, imgs3.length, 0)
}
for (let i = 0; i < imgs4.length; i++) {
setStyle(imgs4[i], i, imgs4.length, 0)
}
}
// 初始化一遍
reloadStyle()
// =================================================== 升級示例 - 鼠標(biāo)縮放（注釋即失效）
// 鼠標(biāo)滾輪 || 觸摸板上下滾動，不要使用捏合手勢，瀏覽器內(nèi)容默認(rèn)會被放大
document.onmousewheel = function (e) {
// 獲取捏合數(shù)值
e || e.window.event
const num = e.wheelDelta / 20 || -e.detail
// 在原基礎(chǔ)上調(diào)整角度數(shù)值
radius += num
// 重新布局
reloadStyle()
}
// =================================================== 升級示例 - 鼠標(biāo)拖拽（注釋即失效）
// 拖拽容器
let dragBox = document.getElementById('box')
// 初始化坐標(biāo)參數(shù)
let startX,
startY,
endX,
endY,
tX = 0,
tY = 10,
desX = 0,
desY = 0
// 鼠標(biāo)按下
document.onpointerdown = function (e) {
// 清楚慣性定時器
clearInterval(dragBox.timer)
// 鼠標(biāo)點擊位置
e = e || ewindow.event
startX = e.clientX
startY = e.clientY
// 停止自動旋轉(zhuǎn)
playAutoRotate(false)
// 鼠標(biāo)移動
this.onpointermove = function (e) {
// 記錄結(jié)束時位置
e = e || window.event
endX = e.clientX
endY = e.clientY
// 計算移動距離并修改角度
desX = endX - startX
desY = endY - startY
tX += desX * 0.1
tY += desY * 0.1
// 設(shè)置角度
changeDragBoxRotate()
// 記錄
startX = endX
startY = endY
}
// 鼠標(biāo)抬起
this.onpointerup = function (e) {
// 添加慣性旋轉(zhuǎn)
dragBox.timer = setInterval(function () {
// 計算慣性
desX *= 0.95
desY *= 0.95
tX += desX * 0.1
tY += desY * 0.1
// 設(shè)置慣性角度
changeDragBoxRotate()
// 慣性數(shù)值不能大于指定數(shù)值，免的滾太多
if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {
// 清空定時器
clearInterval(dragBox.timer)
// 開啟自動旋轉(zhuǎn)
playAutoRotate(true)
}
})
// 清空
this.onpointermove = this.onpointerup = null
}
return false
}
// 修改拖拽角度
function changeDragBoxRotate() {
// X軸旋轉(zhuǎn) 0 - 180 度
if (tY > 180) { tY = 180 }
if (tY < 0) { tY = 0 }
// Y 軸旋轉(zhuǎn)角度不限制
dragBox.style.transform = `rotateX(${-tY}deg) rotateY(${tX}deg)`
}
// 控制旋轉(zhuǎn)狀態(tài)
function playAutoRotate (isPlay) {
// 狀態(tài)
const status = isPlay ? 'running' : 'paused'
// 任意控制一層
boxImgs2.style.animationPlayState = status
boxImgs4.style.animationPlayState = status
}
</script>
</body>
</html>
到了這里，關(guān)于前端 CSS 3D 照片墻自動旋轉(zhuǎn)案例（詳細(xì)步驟）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
