柚子快報激活碼778899分享：前端 CSS3 3D 轉(zhuǎn)換
柚子快報激活碼778899分享：前端 CSS3 3D 轉(zhuǎn)換
CSS3 3D 轉(zhuǎn)換（3D Transforms）是允許你在三維空間中變換元素的技術(shù)。這包括旋轉(zhuǎn)、平移和縮放等操作。通過 transform 屬性，你可以實現(xiàn)更復(fù)雜的視覺效果，如旋轉(zhuǎn)立方體、制作動畫等。
1 旋轉(zhuǎn) (rotateX, rotateY, rotateZ)
transform: rotateX(angle);
transform: rotateY(angle);
transform: rotateZ(angle); /* 或者使用 rotate(angle) */
rotateX(angle)：繞 X 軸旋轉(zhuǎn)。
rotateY(angle)：繞 Y 軸旋轉(zhuǎn)。
rotateZ(angle)：繞 Z 軸旋轉(zhuǎn)（也可以使用 rotate(angle)）。
2 平移 (translateX, translateY, translateZ)
transform: translateX(distance);
transform: translateY(distance);
transform: translateZ(distance);
translateX(distance)：沿 X 軸平移。
translateY(distance)：沿 Y 軸平移。
translateZ(distance)：沿 Z 軸平移（注意：需要 3D 上下文）。
3 縮放 (scaleX, scaleY, scaleZ)
在 CSS 中，transform 屬性允許使用 scaleX、scaleY 和 scaleZ 來進行元素的縮放。這些函數(shù)分別對元素的 X 軸、Y 軸和 Z 軸進行縮放變換。它們是 transform 屬性的組成部分，用于在不同軸上調(diào)整元素的大小。
transform: scaleX(sx) scaleY(sy) scaleZ(sz);
scaleX(sx): 沿 X 軸進行縮放，sx 是一個數(shù)值，表示縮放比例。1 表示原始大小，0.5 表示縮小到原來的 50%，2 表示放大到原來的 200%。scaleY(sy): 沿 Y 軸進行縮放，sy 是一個數(shù)值，表示縮放比例。scaleZ(sz): 沿 Z 軸進行縮放，sz 是一個數(shù)值，表示縮放比例。這個屬性主要用于 3D 轉(zhuǎn)換中。
.container {
perspective: 500px; /* 為 3D 效果提供透視 */
}
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transform: scaleX(1.5) scaleY(1.5) scaleZ(2); /* 沿 X 和 Y 軸放大到原來的 150%，沿 Z 軸放大到原來的 200% */
}
在這個例子中，.box 元素在 X 和 Y 軸上會被放大到原來的 150%，在 Z 軸上則會被放大到原來的 200%。注意，需要在父容器上應(yīng)用 perspective 屬性來使 Z 軸縮放效果可見。
4 透視 (perspective)
perspective 屬性在 CSS 中用于為元素提供 3D 效果，通過定義元素到觀察者的距離來影響元素在 3D 空間中的深度和遠近感。
透視屬性影響 3D 元素的深度感知，通常應(yīng)用于父容器上。
perspective: value;
value: 指定觀察者到元素平面的距離，通常用像素（px）或其他長度單位。較小的值會產(chǎn)生更明顯的 3D 效果。
基本透視
.container {
perspective: 500px; /* 調(diào)整這個值可以得到不同的效果 */
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transform: rotateY(45deg);
}
2. 關(guān)鍵點
深度感: perspective 控制觀察者到元素的距離，影響 3D 效果的明顯程度。透視原點: perspective-origin 屬性可以調(diào)整透視的消失點，從而改變 3D 效果的視覺呈現(xiàn)。應(yīng)用于容器: 通常 perspective 應(yīng)用在父容器上，這樣它會影響所有子元素的 3D 變換效果。
五 transform-style
transform-style 屬性在 CSS 中用于指定如何處理子元素的 3D 轉(zhuǎn)換效果。它控制了子元素是否在 3D 空間中保持其 3D 轉(zhuǎn)換效果。
基本語法
transform-style: flat | preserve-3d;
flat: 默認值，子元素的 3D 轉(zhuǎn)換效果被展平成 2D。即使子元素有 3D 轉(zhuǎn)換，它們也會被看作在同一平面上。preserve-3d: 子元素的 3D 轉(zhuǎn)換效果會被保留，使得子元素在 3D 空間中有深度和層次感。
.container {
transform-style: preserve-3d;
}
.child {
width: 100px;
height: 100px;
background-color: #3498db;
transform: rotateY(45deg) translateZ(100px);
}
在這個例子中，.child 元素的旋轉(zhuǎn)和深度效果會被保留，使其看起來像是在 3D 空間中。
關(guān)鍵點
層次效果: preserve-3d 使子元素在 3D 空間中顯示其深度和層次感。適用場景: 使用 transform-style 主要是為了在包含多個層次的 3D 變換中保持深度效果。
六 3D案例
3D 卡片翻轉(zhuǎn)效果 創(chuàng)建一個可以翻轉(zhuǎn)的 3D 卡片效果。當用戶點擊卡片時，它會在 3D 空間中翻轉(zhuǎn)，展示背面的內(nèi)容。
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
}
.card {
width: 200px;
height: 300px;
perspective: 1000px;
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
cursor: pointer;
}
.card:hover .card-inner {
transform: rotateY(180deg);
}
.card-face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
}
.card-front {
background: #ffffff;
border: 1px solid #ccc;
}
.card-back {
background: #f76c6c;
color: #fff;
transform: rotateY(180deg);
}
3D 旋轉(zhuǎn)立方體 創(chuàng)建一個可以旋轉(zhuǎn)的 3D 立方體。你可以控制立方體的旋轉(zhuǎn)角度，使其在 3D 空間中旋轉(zhuǎn)。
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
perspective: 1000px;
}
.scene {
width: 200px;
height: 200px;
position: relative;
}
.cube {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: rotateX(0) rotateY(0);
transition: transform 1s;
}
.face {
position: absolute;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
color: #333;
}
.front { transform: rotateY( 0deg) translateZ(100px); }
.back { transform: rotateY(180deg) translateZ(100px); }
.left { transform: rotateY(-90deg) translateZ(100px); }
.right { transform: rotateY( 90deg) translateZ(100px); }
.top { transform: rotateX( 90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }
3D 輪播圖
柚子快報激活碼778899分享：前端 CSS3 3D 轉(zhuǎn)換
推薦閱讀
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
Digimart數(shù)碼優(yōu)選
