柚子快報(bào)邀請(qǐng)碼778899分享：CSS3 -- 3D輪播圖
柚子快報(bào)邀請(qǐng)碼778899分享：CSS3 -- 3D輪播圖
一：前言
今天在完善我自己的個(gè)人網(wǎng)站時(shí)，要做一個(gè)3D輪播圖，就是一個(gè)六邊體，在六邊體的每個(gè)面都放一張圖片，但是每個(gè)邊之間都會(huì)有一定的間距，效果如下： 點(diǎn)擊兩邊的按鈕會(huì)旋轉(zhuǎn)切換圖片，每隔4秒會(huì)自動(dòng)切換。 在我初學(xué)的時(shí)候我覺(jué)得這個(gè)效果非常的有意思，很高大上，哈哈哈。今天我就把代碼分享出來(lái)，以供大家使用。
二：屬性講解
要實(shí)現(xiàn)3D效果，我覺(jué)得需要了解一下這幾個(gè)知識(shí)點(diǎn)。
1：tansform-style
取值：preserve-3d | flat
peserve-3d：開(kāi)啟3D空間，子元素可以在3D空間中進(jìn)行變換
flat：關(guān)閉3D空間，子元素的變換沿著父元素的平面進(jìn)行
2：transform
取值：matrix | matrix3d | translate | translate3d | rotate | rotate3d | scale | scale3d | skew | skewX | skewY
matrix：定義一個(gè)2D變換，使用六個(gè)值來(lái)表示矩陣變換
matrix3d：定義一個(gè)3D變換，使用16個(gè)值來(lái)表示矩陣變換
translate：定義一個(gè)2D的平移變換
translate3d：定義一個(gè)3D的平移變換
rotate：定義一個(gè)2D的旋轉(zhuǎn)變換
rotate3d：定義一個(gè)3D的旋轉(zhuǎn)變換
scale：定義一個(gè)2D的縮放變換
scale3d：定義一個(gè)3D的縮放變換
skew：定義一個(gè)2D的斜切變換
skewX：定義一個(gè)2D的x軸方向的斜切變換
skewY：定義一個(gè)2D的y軸方向的斜切變換
3：perspective
取值：length
length：指定觀察者與元素之間的距離，單位可以是px、em、rem等
4：transform-origin
取值：x-axis y-axis z-axis
x-axis：定義元素變換的x軸方向基點(diǎn)，可以是長(zhǎng)度值或百分比
y-axis：定義元素變換的y軸方向基點(diǎn)，可以是長(zhǎng)度值或百分比
z-axis：定義元素變換的z軸方向基點(diǎn)，可以是長(zhǎng)度值或百分比
三：代碼
HTML
CSS
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(28, 28, 28);
}
.outside {
width: 80%;
height: 85%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.rotas {
width: 500px;
height: 340px;
transition: all .6s linear;
position: relative;
transform-style: preserve-3d;
transform: rotateX(-5deg) rotateY(2deg);
user-select: none;
}
.rotas>div {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 0 10px rgb(240, 240, 240);
transform: scale(1.1);
}
.rotas>div div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
background-color: rgba(30, 30, 30, .65);
transition: all .6s linear;
}
.rotas>div.sel div {
background-color: rgba(30, 30, 30, 0);
}
.rotas>div:nth-of-type(1) {
transform: translateZ(500px);
}
.rotas>div:nth-of-type(2) {
transform: rotateY(-60deg) translateZ(500px);
}
.rotas>div:nth-of-type(3) {
transform: rotateY(-120deg) translateZ(500px);
}
.rotas>div:nth-of-type(4) {
transform: translateZ(-500px);
}
.rotas>div:nth-of-type(5) {
transform: rotateY(120deg) translateZ(500px);
}
.rotas>div:nth-of-type(6) {
transform: rotateY(60deg) translateZ(500px);
}
.rotas img {
width: 100%;
height: 100%;
}
.changeBtns {
width: 100%;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.changeBtns>div {
font-size: 20px;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
color: rgb(170, 170, 170);
border: solid 1px;
cursor: pointer;
user-select: none;
}
Javascript
let rotas = $('.rotas');
let rotasPro = $('.rotas >div');
let rightBtn = $('.right');
let leftBtn = $('.left');
let deg = 0;
let degImg = 0;
// 定義函數(shù)
const changeRotas = (obj,n) => {
if(n > 0) {
deg++;
} else {
deg--;
}
obj.css('transform','rotateX(-5deg) rotateY(' + (deg*60+2) + 'deg)');
}
const changeImgs=(n)=> {
if(n > 0) {
if(++degImg >= 6) {
degImg = 0;
}
} else {
if(--degImg < 0) {
degImg = 5;
}
}
rotasPro.removeClass('sel');
$(rotasPro[degImg]).addClass('sel');
}
rightBtn.click(function() {
changeRotas(rotas,1);
changeImgs(1);
});
leftBtn.click(function() {
changeRotas(rotas,-1);
changeImgs(-1);
});
let autoRota = setInterval(function() {
changeRotas(rotas,-1);
changeImgs(-1);
}, 4000);
HTML中的圖片可以換成自己的圖片。
四：結(jié)語(yǔ)
做的不是很好，不過(guò)可以用，有空的大佬幫我指出問(wèn)題我感激不盡！最后感謝大家看完，希望各位能給在下一個(gè)贊！謝謝?。?！
柚子快報(bào)邀請(qǐng)碼778899分享：CSS3 -- 3D輪播圖
相關(guān)文章
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。
轉(zhuǎn)載請(qǐng)注明，如有侵權(quán)，聯(lián)系刪除。
Netshoes鞋履出海坊
