3D 轉(zhuǎn)換
?我們生活的環(huán)境是3D的，照片就是3D物體在2D平面呈現(xiàn)的例子。
有什么特點
近大遠(yuǎn)小。
物體后面遮擋不可見
我們在網(wǎng)頁上構(gòu)建3D效果的時候參考這些特點就能產(chǎn)出3D效果。
三維坐標(biāo)系
三維坐標(biāo)系其實就是指立體空間，立體空間是由3個軸共同組成的。
x軸：水平向右??? ??注意： x 右邊是正值，左邊是負(fù)值
y軸：垂直向下? ????注意： y 下面是正值，上面是負(fù)值
z軸：垂直屏幕??? ??注意： 往外面是正值，往里面是負(fù)值
3D 轉(zhuǎn)換我們主要學(xué)習(xí)工作中最常用的? 3D 位移 和? 3D 旋轉(zhuǎn)
主要知識點
3D位移: translate3d(x,y,z)
3D旋轉(zhuǎn): rotate3d(x,y,z)
透視: perspective
3D呈現(xiàn) transfrom-style
3D移動 translate3d
3D移動在2D移動的基礎(chǔ)上多加了一個可以移動的方向，就是z軸方向。 translform:translateX(100px)：僅僅是在x軸上移動
translform:translateY(100px)：僅僅是在Y軸上移動
translform:translateZ(100px)：僅僅是在Z軸上移動（注意：translateZ一般用px單位）
transform:translate3d(x,y,z)：其中 x、y、z 分別指要移動的軸的方向的距離?
因為z軸是垂直屏幕，由里指向外面，所以默認(rèn)是看不到元素在z軸的方向上移動
透視 perspective
在2D平面產(chǎn)生近大遠(yuǎn)小視覺立體，但是只是效果二維的 ?
如果想要在網(wǎng)頁產(chǎn)生3D效果需要透視（理解成3D物體投影在2D平面內(nèi)）。
模擬人類的視覺位置，可認(rèn)為安排一只眼睛去看?
透視我們也稱為視距：視距就是人的眼睛到屏幕的距離
距離視覺點越近的在電腦平面成像越大，越遠(yuǎn)成像越小?
透視的單位是像素
透視寫在被觀察元素的父盒子上面的
d：就是視距，視距就是一個距離人的眼睛到屏幕的距離。
z：就是 z軸，物體距離屏幕的距離，z軸越大（正值） 我們看到的物體就越大。
?translateZ
translform:translateZ(100px)：僅僅是在Z軸上移動。
有了透視，就能看到translateZ 引起的變化了???
translateZ：近大遠(yuǎn)小
translateZ：往外是正值
translateZ：往里是負(fù)值?
3D旋轉(zhuǎn) rotate3d
3D旋轉(zhuǎn)指可以讓元素在三維平面內(nèi)沿著 x軸，y軸，z軸或者自定義軸進(jìn)行旋轉(zhuǎn)。
語法
transform:rotateX(45deg)：沿著x軸正方向旋轉(zhuǎn) 45度
向里面的就是?rotateX的正軸
transform:rotateY(45deg) ：沿著y軸正方向旋轉(zhuǎn) 45deg
rotateY正值?
transform:rotateZ(45deg) ：沿著Z軸正方向旋轉(zhuǎn) 45deg
transform:rotate3d(x,y,z,deg)： 沿著自定義軸旋轉(zhuǎn) deg為角度（了解即可)
對于元素旋轉(zhuǎn)的方向的判斷 我們需要先學(xué)習(xí)一個左手準(zhǔn)則。
左手準(zhǔn)則
左手的手拇指指向 x軸的正方向
其余手指的彎曲方向就是該元素沿著x軸旋轉(zhuǎn)的方向
?左手的手拇指指向 y軸的正方向
其余手指的彎曲方向就是該元素沿著y軸旋轉(zhuǎn)的方向（正值）
transform:rotate3d(x,y,z,deg)： 沿著自定義軸旋轉(zhuǎn) deg為角度（了解即可）
xyz是表示旋轉(zhuǎn)軸的矢量，是標(biāo)示你是否希望沿著該軸旋轉(zhuǎn)，最后一個標(biāo)示旋轉(zhuǎn)的角度。
transform:rotate3d(1,0,0,45deg) 就是沿著x軸旋轉(zhuǎn) 45deg
transform:rotate3d(1,1,0,45deg) 就是沿著對角線旋轉(zhuǎn) 45deg
3D呈現(xiàn) transfrom-style
控制子元素是否開啟三維立體環(huán)境。
transform-style: flat 子元素不開啟3d立體空間? 默認(rèn)的
transform-style: preserve-3d; 子元素開啟立體空間
代碼寫給父級，但是影響的是子盒子
這個屬性很重要，后面必用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
perspective: 300px;
}
.box{
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: all 2s;
/* 讓子盒子保持3D立體空間環(huán)境 */
transform-style: preserve-3d;
}
.box:hover{
transform: rotateY(60deg);
}
.box div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
}
.box div:last-child{
background-color: purple;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>
</html>案例：兩面翻轉(zhuǎn)的盒子
?案例：實現(xiàn)步驟
1. 搭建HTML結(jié)構(gòu)?
box父盒子里面包含前后兩個子盒子
box 是翻轉(zhuǎn)的盒子? front是前面盒子 back是后面盒子
?2. CSS樣式
①box指定大小，切記要添加3d呈現(xiàn)
②back盒子要沿著Y軸翻轉(zhuǎn)180度
③最后鼠標(biāo)經(jīng)過box 沿著Y旋轉(zhuǎn)180deg
注意：backface-visibility:hidden 不面向屏幕時隱藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
perspective: 400px;
}
.box{
width: 300px;
height: 300px;
margin: 100px auto;
position: relative;
transition: all .6s;
/* 讓背面的紫色盒子保留立體哦空間 */
transform-style: preserve-3d;
}
.box:hover{
transform: rotateY(180deg);
}
.front,.back{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
font-size: 30px;
color: #fff;
text-align: center;
line-height: 300px;
}
.front{
transform: translateZ(1px);
backface-visibility: hidden;
background-color: pink;
z-index: 1;
}
.back{
backface-visibility: hidden;
background: purple;
/* 像手機(jī)一樣背靠背旋轉(zhuǎn) */
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">前端小白</div>
<div class="back">在線尋找?guī)椭?lt;/div>
</div>
</body>
</html>
案例：3D導(dǎo)航欄
實現(xiàn)步驟
1. 搭建HTML結(jié)構(gòu)
<ul>
<li>
<div class="box">
<div class="front">前面</div>
<div class="bottom">后面</div>
</div>
</li>
</ul>li 做導(dǎo)航欄
.box 是翻轉(zhuǎn)的盒子? front是前面盒子 bottom是底下盒子
2. CSS樣式
①li設(shè)置大小，加透視和 3d呈現(xiàn)
②front 需要前移 17.5像素
③bottom 需要下移 17.5像素 并且要沿著x軸翻轉(zhuǎn)? 負(fù)90度
④鼠標(biāo)放到box 讓盒子旋轉(zhuǎn)90度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul{
margin: 100px;
}
ul li{
float: left;
margin-left: 10px;
width: 120px;
height: 35px;
list-style: none;
line-height: 35px;
text-align: center;
color: black;
/* 一會我們需要給box旋轉(zhuǎn) 也需要透視 干脆給li加 里面的子盒子都有透視效果 */
perspective: 500px;
}
.box{
transform-style: preserve-3d;
position: relative;
width: 100%;
height: 100%;
transition: all .4s;
}
.box:hover{
transform: rotateX(90deg);
}
.front,.bottom{
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
.front{
z-index: 1;
background-color: pink;
transform: translateZ(17.5px);
}
.bottom{
background-color: purple;
/* 這個x軸一定是負(fù)值 */
/* 我們?nèi)绻幸苿?或者其他樣式 必須先寫我們的移動 */
transform:translateY(17.5px) rotateX(-90deg) ;
}
</style>
</head>
<body>
<ul>
<li>
<div class="box">
<div class="front">前面</div>
<div class="bottom">后面</div>
</div>
</li>
<li>
<div class="box">
<div class="front">前面</div>
<div class="bottom">后面</div>
</div>
</li>
<li>
<div class="box">
<div class="front">前面</div>
<div class="bottom">后面</div>
</div>
</li>
<li>
<div class="box">
<div class="front">前面</div>
<div class="bottom">后面</div>
</div>
</li>
<li>
<div class="box">
<div class="front">前面</div>
<div class="bottom">后面</div>
</div>
</li>
</ul>
</body>
</html>
?案例：旋轉(zhuǎn)木馬
實現(xiàn)步驟
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
里面的6個div 分別是 6個狗狗圖片
注意最終旋轉(zhuǎn)是section標(biāo)簽 旋轉(zhuǎn)
2. CSS樣式
①給body添加 透視效果 perspective: 1000px;
②給section 添加 大小，一定不要忘記添加? 3d呈現(xiàn)效果控制里面的6個div
別忘記子絕父相，section要加相對定位
③里面6個div 全部絕對定位疊到一起，然后移動不同角度旋轉(zhuǎn)和距離
注意：旋轉(zhuǎn)角度用rotateY?? 距離 肯定用 translateZ來控制
④給section? 添加動畫animation ，讓它可以自動旋轉(zhuǎn)即可文章來源：http://www.zghlxwxcb.cn/news/detail-427841.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
/* 現(xiàn)在版本不一樣，只能給真正的父元素加才有效 */
perspective: 1000px;
}
section{
transform-style: preserve-3d;
/* perspective: 1000px; */
position: relative;
width: 300px;
height: 200px;
margin: 150px auto;
/* 添加動畫 */
animation: rotate 3s linear infinite;
background: url(media/pig.jpg);
}
section:hover{
/* 鼠標(biāo)放入停止動畫 */
animation-play-state: paused;
}
@keyframes rotate{
from{
transform: rotateY(0);
}
to{
transform: rotateY(360deg);
}
}
section div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(media/dog.jpg) no-repeat;
}
section div:nth-child(1){
transform:rotateY(0deg) translateZ(300px);
}
section div:nth-child(2){
/* 先旋轉(zhuǎn)好了 再移動 */
transform: rotateY(60deg) translateZ(300px);
}
section div:nth-child(3){
/* 先旋轉(zhuǎn)好了 再移動 */
transform: rotateY(120deg) translateZ(300px);
}
section div:nth-child(4){
/* 先旋轉(zhuǎn)好了 再移動 */
transform: rotateY(180deg) translateZ(300px);
}
section div:nth-child(5){
/* 先旋轉(zhuǎn)好了 再移動 */
transform: rotateY(240deg) translateZ(300px);
}
section div:nth-child(6){
/* 先旋轉(zhuǎn)好了 再移動 */
transform: rotateY(300deg) translateZ(300px);
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
文章來源地址http://www.zghlxwxcb.cn/news/detail-427841.html
到了這里，關(guān)于CSS3提高： CSS3 3D轉(zhuǎn)換的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
