Tips:閱讀提示!W烦佟脆荷!
- 首先,本文針對(duì)的是3D transform變換的學(xué)習(xí)集晚,所以你需要對(duì) 2D transform變換 有一定的了解
- 其次窗悯,需要說(shuō)明的是,代碼是一種需要自己不斷實(shí)踐的學(xué)科偷拔,建議各位在開始學(xué)習(xí)本篇文檔的時(shí)候蒋院,先創(chuàng)建一個(gè)
html頁(yè)面
來(lái)邊讀邊練,
相信這樣擂红,一定會(huì)給你留下一個(gè)非常直觀且深刻的印象翠勉!
本文練習(xí)一些公共代碼
鑒于本文貼了不少代碼來(lái)演示督赤,所有這里提前放一個(gè)所有演示的公共代碼片段
// 公共DOM元素,后續(xù)均為此寫樣式表
// 舞臺(tái)容器
<div class="stage">
// 變換元素
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
// 樣式兼容的各個(gè)瀏覽器屬性頭辞友,有需要的在各自代碼中添加
// 下列測(cè)試代碼使用Chorme運(yùn)行
-webkit- /* Safari 和 Chrome */
-ms- /* IE */
-moz- /* Firefox */
-o- /* Opera */
實(shí)現(xiàn)3D變換的基礎(chǔ) -- 透視(perspective)
當(dāng)我們步入CSS3
動(dòng)畫殿堂之時(shí),我們一般都會(huì)從一些簡(jiǎn)單動(dòng)的東西開始學(xué)習(xí)震肮,比如元素的位移称龙,旋轉(zhuǎn),放大縮小之類的2D transform變換
戳晌,
那么如何在一個(gè)2D
的屏幕上實(shí)現(xiàn)3D
的變換呢鲫尊,這里我們就先需要有一個(gè)概念,就是 透視
從一個(gè)最簡(jiǎn)單的 透視 說(shuō)起沦偎,我們小時(shí)候的數(shù)學(xué)課上疫向,數(shù)學(xué)老師一定會(huì)給我們畫一個(gè)立體正方形,能夠在2D
平面上看出3D
效果就是 透視 的作用
用一張直觀的圖片來(lái)說(shuō)明一下
透視的類型有以下幾種
那么在CSS3中如何用代碼實(shí)現(xiàn)透視呢豪嚎?
- 主要是通過(guò)
perspective
屬性來(lái)實(shí)現(xiàn)定義透視距離 -
perspective
屬性定義3D
元素距視圖的距離鸿捧,以像素計(jì),該屬性允許您改變3D
元素查看3D
元素的視圖 - 透視距離可以這么理解疙渣,如果你的顯示器寬度是
1920px
的分辨率匙奴,那么2000px
的透視距離就近似于,從顯示器平面開始妄荔,一個(gè)顯示器寬度的距離 - 默認(rèn)值是
0px
泼菌,可以理解為初始位置 - 注意!@沧狻哗伯!當(dāng)為元素定義 perspective 屬性時(shí),其子元素會(huì)獲得透視效果篷角,而不是元素本身
- 它有兩種寫法焊刹,單個(gè)元素時(shí)候看似效果相同,但是多元素在同一個(gè)舞臺(tái)上呈現(xiàn)時(shí),就會(huì)出現(xiàn)問(wèn)題了
- 第一種虐块,是寫在舞臺(tái)元素上俩滥,定義
perspective
屬性 - 第二種,是配合
transform
屬性一起贺奠,例如:transform: perspective(600px) rotateY(45deg)
- 參考下方示例霜旧,您可以在自己的demo中測(cè)試效果區(qū)別,你會(huì)發(fā)現(xiàn)第二種所有元素都是同一角度的旋轉(zhuǎn)儡率,
這是因?yàn)榈谝环N透視點(diǎn)是.stage
中央挂据,第二種透視點(diǎn)是每一個(gè).box
中央
- 第一種虐块,是寫在舞臺(tái)元素上俩滥,定義
// 第一種寫法
.stage {
width: 100%;
height: 100%;
perspective: 1000px;
-webkit-perspective: 500px;
}
.stage .box {
width: 100px;
height: 100px;
margin: 100px 100px;
background-color: #55ffff;
display: inline-block;
transform: rotateY(65deg);
-webkit-transform: rotateY(65deg);
}
// 第二種寫法
.stage {
width: 100%;
height: 100%;
}
.stage .box {
width: 100px;
height: 100px;
margin: 100px 100px;
background-color: #55ffff;
display: inline-block;
transform: perspective(1000px) rotateY(65deg);
-webkit-transform: perspective(1000px) rotateY(65deg);
}
透視基點(diǎn)位置屬性(perspective-origin)
- 既然我我們有透視距離的概念,那么這個(gè)透視基點(diǎn)的意思就是儿普,我們所看的舞臺(tái)或者元素的中心
-
perspective
(透視)屬性必須和perspective-origin
(透視基點(diǎn))屬性一同使用 -
perspective-origin: x-axis y-axis
崎逃,xy可以分別是這些值:- left
- right
- center
- length,像素
- %眉孩,百分比
- 舉個(gè)不恰當(dāng)?shù)睦踊橥眩敢暬c(diǎn)類似看足球比賽中那個(gè)球的位置,因?yàn)樗腥搜鄱紩?huì)盯著場(chǎng)上的足球勺像,你和球的距離理解為透視距離就好障贸,當(dāng)然這并不恰當(dāng),不要在意
- 該屬性必須與
perspective
屬性一同使用吟宦,而且只影響3D
轉(zhuǎn)換元素篮洁,它可以定義在元素中,并且同perspective
屬性一樣殃姓,定義在哪里影響哪里 - 默認(rèn)值是
50% 50%
袁波,表示 xy 中心位置 - 下面我們利用一個(gè)示例來(lái)看看,你依舊可以通過(guò)修改demo中的參數(shù)蜗侈,看到效果的變化
// 50% 50% 正好是變換元素的中心點(diǎn)篷牌,也是默認(rèn)值
.stage {
width: 100%;
height: 100%;
perspective: 604px;
-webkit-perspective: 604px;
// 使用百分比
perspective-origin: 50% 50%;
-webkit-perspective-origin: 50% 50%;
// 使用像素
// perspective-origin: 200px 100px;
// -webkit-perspective-origin: 200px 100px;
// 使用位置
// perspective-origin: left center;
// -webkit-perspective-origin: left center;
// 也可以混用
// perspective-origin: 200px 10%;
// -webkit-perspective-origin: 200px 10%;
}
.stage .box {
width: 100px;
height: 100px;
margin: 100px 100px;
background-color: #55ffff;
display: inline-block;
transform: rotateY(65deg);
-webkit-transform: rotateY(65deg);
}
透視盲區(qū)
在我們進(jìn)行3D變換的時(shí)候還會(huì)遇到透視盲區(qū)的問(wèn)題,比如一個(gè)正方形踏幻,旋轉(zhuǎn)45°之后枷颊,正好和你的視線完全平行,那么這個(gè)面你就看不到该面,這就是視覺(jué)盲區(qū)
你可以利用下方代碼在自己的demo中查看一下效果
// 我的電腦分辨率是`1920*1080`夭苗,透視距離是`604px`
// 如果你看不到效果,可以嘗試修改旋轉(zhuǎn)角度或透視距離隔缀,找一下出現(xiàn)盲區(qū)的角度
.stage {
width: 100%;
height: 100%;
perspective: 604px;
-webkit-perspective: 604px
}
.stage .box {
width: 100px;
height: 100px;
margin: 100px 100px;
background-color: #55ffff;
display: inline-block;
transform: rotateY(65deg);
-webkit-transform: rotateY(65deg);
}
實(shí)現(xiàn)靜態(tài)的3D變換 -- 轉(zhuǎn)換(transform)
相信在2D變換的學(xué)習(xí)中對(duì)于transform
屬性一定不陌生了题造,它不僅可以進(jìn)行2D
變換,也可以進(jìn)行3D
變換猾瘸,只不過(guò)需要借助上一個(gè)透視的屬性界赔,我們才可以在屏幕中看到變換的效果
先來(lái)說(shuō)明一個(gè)三維坐標(biāo)系的概念丢习,通俗點(diǎn)來(lái)說(shuō),z軸
對(duì)應(yīng)垂直方向淮悼,x軸
對(duì)應(yīng)前后方向咐低,y軸
對(duì)應(yīng)左右方向
后續(xù)我們所說(shuō)的繞軸變化,你就可以參考這個(gè)圖例敛惊,想象一下發(fā)生的變換
接下來(lái)我們來(lái)看看transform
支持的變換類型渊鞋,如果對(duì)此您有疑問(wèn)绰更,可以參考w3school的可測(cè)試教程:
- 2D類型
轉(zhuǎn)換(位移)
translate(x,y)
/translateX(x)
/translateY(y)
縮放scale(x,y)
/scaleX(x)
/scaleY(y)
旋轉(zhuǎn)rotate(angle)
/rotateX(angle)
/rotateY(angle)
傾斜skew(x-angle,y-angle)
/skewX(angle)
/skewY(angle)
matrix()
瞧挤,把所有 2D 變換方法組合為一個(gè),可接受六個(gè)參數(shù)儡湾,matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
- 3D類型
轉(zhuǎn)換(位移)
translate3d(x,y,z)
/translateZ(z)
特恬,主要是垂直距離的位移
縮放scale3d(x,y,z)
/scaleZ(z)
,同樣是垂直距離的縮放
旋轉(zhuǎn)rotate3d(x,y,z,angle)
/rotateX(angle)
/rotateY(angle)
/rotateZ(angle)
rotateX
/rotateY
/rotateZ
三種函數(shù)分別意思是繞著XYZ
軸做旋轉(zhuǎn)運(yùn)動(dòng)徐钠,angle
參數(shù)為單位為deg
的角度
rotate3d
函數(shù)定義一個(gè)變換癌刽,它將元素圍繞固定軸移動(dòng)而不使其變形,運(yùn)動(dòng)量由指定的角度定義尝丐,
如果為正显拜,運(yùn)動(dòng)將為順時(shí)針,如果為負(fù)爹袁,則為逆時(shí)針远荠,想要了解更多可以參考 這篇文檔中的動(dòng)態(tài)示例 理解
2D
變換請(qǐng)參考 本文Tips中的鏈接 或百度教程,下面我們來(lái)詳細(xì)看下實(shí)現(xiàn)靜態(tài)3D
變換的代碼
.stage {
width: 100%;
height: 100%;
perspective: 500px;
-webkit-perspective: 500px;
perspective-origin: 50% 50%;
-webkit-perspective-origin: 50% 50%;
}
.stage .box {
width: 100px;
height: 100px;
margin: 100px 100px;
background-color: #55ffff;
display: inline-block;
// 這里表示繞Y軸做旋轉(zhuǎn)65度的變換
transform: rotate3d(0, 1, 0, 65deg);
-webkit-transform: rotate3d(0, 1, 0, 65deg);
}
轉(zhuǎn)換基點(diǎn)位置屬性(transform-origin)
-
transform-origin
屬性允許您改變被轉(zhuǎn)換元素的位置失息,2D
轉(zhuǎn)換元素能夠改變?cè)豿y軸譬淳,3D
轉(zhuǎn)換元素還能改變其z軸 -
transform-origin: x-axis y-axis z-axis
,這定義了視圖被置于xyz軸的何處盹兢,z值只能是length
邻梆,xy可以分別是這些值:- left
- right
- center
- length,像素
- %绎秒,百分比
-
transform-origin
屬性必須和transform
屬性一同使用 - 默認(rèn)值是
50% 50% 0
浦妄,表示轉(zhuǎn)換基點(diǎn)位于 xy 中心以及 z軸 0 的位置 - 下面我們利用一個(gè)示例來(lái)看看,你依舊可以通過(guò)修改demo中的參數(shù)见芹,看到效果的變化
.stage {
width: 100%;
height: 100%;
perspective: 500px;
-webkit-perspective: 500px;
perspective-origin: 50% 50%;
-webkit-perspective-origin: 50% 50%;
}
.stage .box {
width: 100px;
height: 100px;
margin: 100px 100px;
background-color: #55ffff;
display: inline-block;
transform: rotate3d(0, 1, 0, 65deg);
-webkit-transform: rotate3d(0, 1, 0, 65deg);
// 表示旋轉(zhuǎn)元素的基準(zhǔn)點(diǎn)在 x 100px y 100px z -900px 位置
// 值類型自由使用校辩,不做過(guò)多說(shuō)明,參考上方透視基點(diǎn)屬性
transform-origin: 100px 100px -900px;
-webkit-transform-origin: 100px 100px -900px;
}
轉(zhuǎn)換如何呈現(xiàn)屬性(transform-style)
-
transform-style
屬性規(guī)定如何在3D
空間中呈現(xiàn)被嵌套的元素 -
transform-style: flat | preserve-3d
辆童,flat
表示子元素將不保留其3D
位置宜咒,preserve-3d
表示子元素保留其3D
位置 - 默認(rèn)值是
flat
,不保留3D位置 - 下面用一個(gè)不同于上面幾個(gè)示例的示例來(lái)展示整個(gè)屬性的效果把鉴,你可以在demo中修改幾個(gè)屬性來(lái)查看效果
<div class="stage">
<div class="box">
<div class="box-out">
<div class="box-in"></div>
</div>
</div>
</div>
.stage {
width: 100%;
height: 100%;
perspective: 1600px;
-webkit-perspective: 1600px;
}
.stage .box {
width: 400px;
height: 400px;
margin: 100px 100px;
background-color: #55ffff;
transform: rotate3d(0, 1, 0, 65deg);
-webkit-transform: rotate3d(0, 1, 0, 65deg);
// 這里會(huì)展示3D效果
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
// 不展示3D效果
// transform-style: flat;
// -webkit-transform-style: flat;
}
.stage .box .box-out {
width: 90%;
height: 90%;
background-color: #ffff00;
transform: rotate3d(0.5, 1, 0, 85deg);
-webkit-transform: rotate3d(0.5, 1, 0, 85deg);
}
.stage .box .box-out .box-in {
width: 150%;
height: 150%;
background-color: #aaff7f;
transform: rotate3d(0.1, 1, 0.5, 85deg);
-webkit-transform: rotate3d(0.1, 1, 0.5, 85deg);
}
背面是否可見(jiàn)屬性(backface-visibility)
-
backface-visibility
屬性定義當(dāng)元素不面向屏幕時(shí)是否可見(jiàn) -
backface-visibility: visible | hidden
故黑,visible
表示背面是可見(jiàn)的儿咱,hidden
表示背面不可見(jiàn) - 該屬性主要用于不想展示被旋轉(zhuǎn)元素的背面時(shí)使用,通常用于一些翻轉(zhuǎn)動(dòng)效场晶,比如爐石的抽卡混埠,就屬于背面可見(jiàn)
- 下面我們可以通過(guò)翻拍效果示例來(lái)理解一下這個(gè)屬性的作用
<div class="stage">
<div class="box">
<div class="box-prev"></div>
<div class="box-next"></div>
</div>
</div>
.stage {
width: 100%;
height: 100%;
perspective: 1600px;
-webkit-perspective: 1600px;
}
.box {
width: 400px;
height: 400px;
margin: 100px 100px;
position: relative;
transition: 0.5s all;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.box-prev,
.box-next {
width: 100%;
height: 100%;
position: absolute;
transition: 0.5s all;
backface-visibility: hidden;
}
.box-prev {
background-color: #ffff00;
z-index: 1;
}
.box-next {
background-color: #aaff7f;
transform: rotateY(180deg);
z-index: 0;
}
.box:hover{
transform: rotateY(180deg);
}
做一些簡(jiǎn)單的循環(huán)動(dòng)效
學(xué)習(xí)了上述代碼之后,我們可以做一些簡(jiǎn)單的循環(huán)動(dòng)效了诗轻,這里我們用一個(gè)簡(jiǎn)單的翻書效果來(lái)練習(xí)钳宪,當(dāng)然還有很多奇思妙想期待你自己去實(shí)踐啦!
<div class="stage">
<div class="box">
<div class="box-prev"></div>
<div class="box-midd"></div>
<div class="box-next">
<span></span>
<span></span>
</div>
</div>
</div>
.stage {
width: 100%;
height: 100%;
}
.box {
width: 400px;
height: 400px;
margin: 100px 100px;
position: relative;
transition: 0.5s all;
transform-style: preserve-3d;
}
.box-prev,
.box-midd,
.box-next {
width: 100%;
height: 100%;
position: absolute;
transition: 3s all;
}
.box-prev {
background-color: #ffff9b;
z-index: 2;
}
.box-midd {
background-color: #aaff7f;
z-index: 1;
}
.box-next {
display: flex;
justify-content: space-between;
z-index: 0;
}
.box-next span {
width: 50%;
height: 100%;
}
.box-next span:nth-child(1) {
background-color: #ffff9b;
}
.box-next span:nth-child(2) {
background-color: #aaff7f;
}
.box:hover .box-prev {
transform: perspective(800px) rotateY(-180deg);
transform-origin: perspective(800px) 50% 50% 0;
}
.box:hover .box-midd {
transform: perspective(800px) rotateY(-180deg);
transform-origin: perspective(800px) 50% 50% 0;
}
參考文檔一 ———— 帶你玩轉(zhuǎn)css3的3D扳炬!
參考文檔二 ———— 好吧吏颖,CSS3 3D transform變換,不過(guò)如此恨樟!
參考文檔三 ———— CSS perspective 屬性
參考文檔三 ———— CSS perspective-origin 屬性
參考文檔五 ———— CSS transform 屬性
參考文檔六 ———— CSS transform-origin 屬性
參考文檔七 ———— CSS transform-style 屬性
參考文檔八 ———— CSS backface-visibility 屬性
參考文檔九 ———— CSS3中設(shè)置3D變形的transform-style屬性詳解
我是 fx67ll.com半醉,如果您發(fā)現(xiàn)本文有什么錯(cuò)誤,歡迎在評(píng)論區(qū)討論指正劝术,感謝您的閱讀缩多!
如果您喜歡這篇文章,歡迎訪問(wèn)我的 本文github倉(cāng)庫(kù)地址养晋,為我點(diǎn)一顆Star衬吆,Thanks~ :)
轉(zhuǎn)發(fā)請(qǐng)注明參考文章地址,非常感謝IQ仿铡!