css3帶你實(shí)現(xiàn)3D轉(zhuǎn)換效果
我要評論前言
在css3中允許使用3D轉(zhuǎn)換來對元素進(jìn)行格式化，在原本只是2D轉(zhuǎn)化的平面中引入了Z軸。在這之前我們講解了css3中的2D轉(zhuǎn)換，也就是二維空間變換，本篇的3D轉(zhuǎn)換就是基于原來的2D轉(zhuǎn)換而來，與2D轉(zhuǎn)換的功能相似。
三維坐標(biāo)系
相信學(xué)過數(shù)學(xué)的效果版對這一概念多多少少是知道的，我們要想有一個(gè)3D空間效果，也就是立體空間感，比如：正方體、長方體.....再比如我們生活所居住的房間也是3D立體空間的，主要有X軸、Y軸Z軸共同組成
x軸 ： 水平向右，x右邊是正值，左邊是負(fù)值。
y軸 ： 垂直向下，y下面是正值，上面是負(fù)值。
z軸 ： 垂直屏幕，往外面是正值，往里面是負(fù)值。
轉(zhuǎn)換屬性
| 屬性 | 描述 |
| transform | 使得元素向2D或3D轉(zhuǎn)換 |
| transform-origin | 改變轉(zhuǎn)換元素的位置 |
| transform-style | 規(guī)定被嵌套元素如何在 3D 空間中顯示 |
| perspective | 規(guī)定 3D 元素的透視效果 |
| perspective-origin | 規(guī)定 3D 元素的底部位置 |
| backface-visibility | 定義元素在不面對屏幕時(shí)是否可見 |
這里transform屬性和transform-origin屬性在前一篇《有趣的transform形變》中已經(jīng)講解了，這里就不再細(xì)說。不同的是在3D轉(zhuǎn)換中，transform-origin屬性會接收第三個(gè)值，表示Z軸方向位置
（1）transform-style
transform-style設(shè)置元素的子元素是位于 3D 空間中還是平面中。
語法：
div{
transform-style: flat|preserve-3d;
}
flat：設(shè)置元素的子元素位于該元素的平面中（子元素不設(shè)置3D空間）
<!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>
.box{
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: .5s;
/* flat:子元素不存在3D空間 */
transform-style: flat;
background-color: #eee;
}
.box:hover{
transform: rotateY(60deg);
}
.s{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
}
.s2{
background-color: orange;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<div class="box">
<div class="s s1"></div>
<div class="s s2"></div>
</div>
</body>
</html>
設(shè)置flat值，子元素就只位于平面中，效果如下：
preserve-3d：設(shè)置元素的子元素應(yīng)用于3D空間中
基于上述栗子，將transform-style屬性值改為preserve-3d：
.box{
/* 讓子元素保持3d立體空間環(huán)境 */
transform-style: preserve-3d;
}
得到3D空間效果：
3D視覺是不是感覺一下就來啦~
（2）perspective
perspective指定了觀察者與 z=0 平面的距離，使具有三維位置變換的元素產(chǎn)生透視效果。如果不指定透視，則Z軸空間中的所有點(diǎn)將平鋪到同一個(gè)2D視平面中，并且變換結(jié)果中將不存在景深概念
z>0 的三維元素比正常大，而 z<0 時(shí)則比正常小，大小程度由該屬性的值決定
“perspective”本身就具有透視的意思，就是設(shè)置用于戶和元素3D空間Z平面之間的距離（視距），簡單理解就是將電腦屏幕當(dāng)做一個(gè)平面，用戶眼睛到屏幕的垂直方向。值越大用戶與屏幕距離越遠(yuǎn)，視覺效果很小，值越小3D效果就越明顯。
語法：
div{
perspective：none | <length>
}
- none：默認(rèn)值，與 0 相同，不設(shè)置透視
- length：元素距離視圖的距離，以像素計(jì)
這里還是以上述栗子進(jìn)行演示：
body{
perspective: 900px;
}
或者
.box{
perspective: 900px;
}
只要設(shè)置在父盒子上就可以，效果如下：
從第一眼就可以看出與上面不同，沒有設(shè)置景深是這樣：
設(shè)置了景深是這樣的：
注意：perspective屬性只影響 3D 轉(zhuǎn)換元素，并且同時(shí)使用perspective-origin屬性，可以改變 3D 元素的底部位置
（3）perspective-orgin
perspective-origin 屬性定義 3D 元素所基于的 X 軸和 Y 軸。該屬性允許您改變 3D 元素的底部位置。
語法：
perspective-origin: x-axis y-axis;
x-position：指定消失點(diǎn)的橫坐標(biāo)，其值有以下形式：
<length-percentage>長度值或相對于元素寬度的百分比值，可為負(fù)值。
left, 關(guān)鍵字，0值的簡記。center, 關(guān)鍵字，50%的簡記。right, 關(guān)鍵字，100%的簡記。
y-position：指定消失點(diǎn)的縱坐標(biāo)，其值有以下形式：
<length-percentage>長度值或相對于元素高度的百分比值，可為負(fù)值。top, 關(guān)鍵字，0值的簡記。center, 關(guān)鍵字，50%的簡記。bottom, 關(guān)鍵字，100%的簡記
介紹完語法使用，我們知道了怎么取值，下面還是基于上述例子繼續(xù)演示：
值為長度值：
.box{
perspective-origin: 300px;
}
效果如下：
值為關(guān)鍵字：
.box{
perspective: 900px;
perspective-origin: left;
}
效果如下：
值為百分比：
.box{
perspective: 900px;
perspective-origin: 300%;
}
效果如下：
兩個(gè)值：
.box{
perspective: 900px;
perspective-origin: left top;
}
效果如下：
（4）backface-visibility
backface-visibility指定當(dāng)元素背面朝向觀察者時(shí)是否可見
元素的背面是其正面的鏡像，雖然在 2D 中不可見，但是當(dāng)變換導(dǎo)致元素在 3D 空間中旋轉(zhuǎn)時(shí)，背面可以變得可見。 （此屬性對 2D 變換沒有影響，它沒有透視。）
語法：
backface-visibility: visible|hidden;
- visible：默認(rèn)值。 背面是可見的。
- hidden：背面是不可見的
這里借鑒了MDN上面的例子：
<!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>
.showbf div {
backface-visibility: visible;
}
.hidebf div {
backface-visibility: hidden;
}
.container {
width: 150px;
height: 150px;
margin: 75px 0 0 75px;
border: none;
}
.cube {
width: 100%;
height: 100%;
perspective: 550px;
perspective-origin: 150% 150%;
transform-style: preserve-3d;
}
.face {
display: block;
position: absolute;
width: 100px;
height: 100px;
border: none;
line-height: 100px;
font-family: sans-serif;
font-size: 60px;
color: white;
text-align: center;
}
.front {
background: rgba(0, 0, 0, 0.3);
transform: translateZ(50px);
}
.back {
background: rgba(0, 255, 0, 1);
color: black;
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgba(196, 0, 0, 0.7);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgba(0, 0, 196, 0.7);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgba(196, 196, 0, 0.7);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgba(196, 0, 196, 0.7);
transform: rotateX(-90deg) translateZ(50px);
}
th, p, td {
background-color: #EEEEEE;
margin: 0px;
padding: 6px;
font-family: sans-serif;
text-align: left;
}
</style>
</head>
<body>
<table>
<tr>
<th><code>backface-visibility: visible;</code></th>
<th><code>backface-visibility: hidden;</code></th>
</tr>
<tr>
<td>
<div class="container">
<div class="cube showbf">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
<p>
Since all faces are partially transparent,
the back faces (2, 4, 5) are visible
through the front faces (1, 3, 6).
</p>
</td>
<td>
<div class="container">
<div class="cube hidebf">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
<p>
The three back faces (2, 4, 5) are
hidden.
</p>
</td>
</tr>
</table>
</body>
</html>
3D轉(zhuǎn)換
旋轉(zhuǎn)單位：deg(角度)、rad(弧度)、grad(梯度)、turn(圈)
- 弧度 = 角度*π/180
- grad = 360度(一圈)
（1）3D位移
3D位移在2D基礎(chǔ)上多加了一個(gè)可以z軸移動的方向
3D位移主要演示translateZ和translate3d兩個(gè)屬性：
translate3d()CSS 函數(shù)在3D空間內(nèi)移動一個(gè)元素的位置，這個(gè)移動由一個(gè)三維向量來表達(dá)，分別表示他在三個(gè)方向上移動的距離
<!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>3D位移</title>
<style>
body{
perspective: 800px;
}
.box{
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: .5s;
background-color: pink;
text-align: center;
line-height: 200px;
}
.box:hover{
/* transform: translateX(50px) translateY(100px) translateZ(200px); */
/* 簡寫 */
transform: translate3d(50px,100px,200px);
}
</style>
</head>
<body>
<div class="box">3D位移</div>
</body>
</html>
效果如下：
注意：
- 首先要設(shè)置
perspectiv屬性在被觀察元素的父盒子上，不然不會有Z軸效果。 - 如果只是單獨(dú)設(shè)置Z軸視距，可以直接使用translateZ屬性。
- Z軸設(shè)置的值越大，距離我們眼睛就越近，也就是簡單理解元素被放大了
- Z軸設(shè)置的值越小，或者為負(fù)數(shù)，則會離我們眼睛越遠(yuǎn)，元素縮小
（2）3D旋轉(zhuǎn)
- rotateX：讓元素圍繞X軸轉(zhuǎn)
- rotateY：讓元素圍繞Y軸旋轉(zhuǎn)
- rotateZ：讓元素圍繞Z軸旋轉(zhuǎn)
- rotate3d：讓元素圍繞固定軸旋轉(zhuǎn)不變形
旋轉(zhuǎn)量由角度決定，角度為正則順時(shí)針旋轉(zhuǎn)，反之逆時(shí)針旋轉(zhuǎn)
<!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>3D旋轉(zhuǎn)</title>
<style>
body{
perspective: 800px;
}
.box{
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: .5s;
background-color: pink;
text-align: center;
line-height: 200px;
}
.box:hover{
transform: rotateX(180deg); /* X軸旋轉(zhuǎn)180° */
transform: rotateY(180deg); /* Y軸旋轉(zhuǎn)180° */
transform: rotateZ(180deg); /* Z軸旋轉(zhuǎn)180° */
}
</style>
</head>
<body>
<div class="box">3D旋轉(zhuǎn)</div>
</body>
</html>
X軸旋轉(zhuǎn)效果：
Y軸旋轉(zhuǎn)效果：
Z軸旋轉(zhuǎn)效果：
這里單獨(dú)將rotate3d函數(shù)拎出來講
語法：
rotate3d(x, y, z, a)
取值分析：
- x：可以是0到1之間的數(shù)值，表示旋轉(zhuǎn)軸X坐標(biāo)方向的矢量
- y：可以是0到1之間的數(shù)值，表示旋轉(zhuǎn)軸Y坐標(biāo)方向的矢量
- z：可以是0到1之間的數(shù)值，表示旋轉(zhuǎn)軸Z坐標(biāo)方向的矢量
- a：表示旋轉(zhuǎn)角度。正的角度值表示順時(shí)針旋轉(zhuǎn)，負(fù)值表示逆時(shí)針旋轉(zhuǎn)
也就是說rotateX(a) === rotate3d(1,0,0,a)、rotateY(a) === rotate3d(0,1,0,a)、rotateZ(a) === rotate3d(0,0,1,a)
.box:hover{
transform: rotate3d(1,1,0,50deg); /* 表示在X軸和Y軸旋轉(zhuǎn)50° */
}
效果如下：
.box:hover{
transform: rotate3d(1,1,1,1turn); /* 圍繞3軸旋轉(zhuǎn)一圈 */
}
效果如下：
綜合案例
基于上述所學(xué)內(nèi)容，我們來實(shí)操做一個(gè)3D盒子旋轉(zhuǎn)：
html結(jié)構(gòu)：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3D盒子旋轉(zhuǎn)</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<section>
<div><img src="images/1.jpg" alt="" /></div>
<div><img src="images/2.jpg" alt="" /></div>
<div><img src="images/3.jpg" alt="" /></div>
<div><img src="images/4.jpg" alt="" /></div>
<div><img src="images/5.jpg" alt="" /></div>
<div><img src="images/6.jpg" alt="" /></div>
<div><img src="images/1.jpg" alt="" /></div>
<div><img src="images/2.jpg" alt="" /></div>
<div><img src="images/3.jpg" alt="" /></div>
<div><img src="images/4.jpg" alt="" /></div>
<div><img src="images/5.jpg" alt="" /></div>
<div><img src="images/6.jpg" alt="" /></div>
</section>
</body>
</html>
css部分：
* {
/* 初始化 */
padding: 0;
margin: 0;
}
body {
/* 彈性布局*/
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
/* 視距 */
perspective: 1000px;
}
section {
position: relative;
width: 150px;
height: 150px;
/* 讓子元素保留其3D位置 */
transform-style: preserve-3d;
/* 動畫 名稱 時(shí)長 linear 是勻速運(yùn)動 infinite是無限次播放 */
animation: rotate 5s linear infinite;
}
section div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
transition: all 1s;
}
section div img {
width: 100%;
height: 100%;
}
/* 這里使用的偽類選擇器 */
section div:nth-child(1) { /* 選擇第1個(gè)元素 */
transform: translateZ(75px);
}
section:hover div:nth-child(1) {
transform: translateZ(200px);
}
section div:nth-child(2) { /* 選擇第2個(gè)元素 */
transform: rotateX(-180deg) translateZ(75px);
}
section:hover div:nth-child(2) {
transform: rotateX(-180deg) translateZ(200px);
}
section div:nth-child(3) { /* 選擇第3個(gè)元素 */
transform: rotateX(90deg) translateZ(75px);
}
section:hover div:nth-child(3) {
transform: rotateX(90deg) translateZ(200px);
}
section div:nth-child(4) { /* 選擇第4個(gè)元素 */
transform: rotateX(-90deg) translateZ(75px);
}
section:hover div:nth-child(4) {
transform: rotateX(-90deg) translateZ(200px);
}
section div:nth-child(5) { /* 選擇第5個(gè)元素 */
transform: rotateY(90deg) translateZ(75px);
}
section:hover div:nth-child(5) {
transform: rotateY(90deg) translateZ(200px);
}
section div:nth-child(6) { /* 選擇第6個(gè)元素 */
transform: rotateY(-90deg) translateZ(75px);
}
section:hover div:nth-child(6) {
transform: rotateY(-90deg) translateZ(200px);
}
section div:nth-child(7) { /* 選擇第7個(gè)元素 */
transform: translateZ(75px);
}
section div:nth-child(8) { /* 選擇第8個(gè)元素 */
transform: rotateX(-180deg) translateZ(75px);
}
section div:nth-child(9) { /* 選擇第9個(gè)元素 */
transform: rotateX(90deg) translateZ(75px);
}
section div:nth-child(10) { /* 選擇第10個(gè)元素 */
transform: rotateX(-90deg) translateZ(75px);
}
section div:nth-child(11) { /* 選擇第11個(gè)元素 */
transform: rotateY(90deg) translateZ(75px);
}
section div:nth-child(12) { /* 選擇第12個(gè)元素 */
transform: rotateY(-90deg) translateZ(75px);
}
/* 定義動畫 */
@keyframes rotate {
0% {
transform: rotateY(0) rotateX(0);
}
100% {
transform: rotateY(360deg) rotateX(360deg);
}
}
效果如下
到此這篇關(guān)于css3帶你實(shí)現(xiàn)3D轉(zhuǎn)換效果的文章就介紹到這了,更多相關(guān)css3 3D轉(zhuǎn)換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
利用HTML5+CSS3實(shí)現(xiàn)3D轉(zhuǎn)換效果實(shí)例詳解
對于css的二維世界，相信大家都不陌生。在二維的世界里，我們可以對元素設(shè)置寬高、位置、旋轉(zhuǎn)、背景等等。在css三維世界里，擴(kuò)展出了一個(gè)z軸，這個(gè)z軸垂直于屏幕并指向外面2017-05-02用css3實(shí)現(xiàn)轉(zhuǎn)換過渡和動畫效果
這篇文章主要介紹了用css3實(shí)現(xiàn)轉(zhuǎn)換過渡和動畫效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-13css3學(xué)習(xí)之2D轉(zhuǎn)換功能詳解
眾所周知在css3中出現(xiàn)了許多新的特性，其中2D轉(zhuǎn)換我覺的非常有意思，通過它我們能夠?qū)υ剡M(jìn)行移動、縮放、轉(zhuǎn)動、拉長或者拉伸，所以希望在這里和大家分享一下。有需要的朋2016-12-23CSS3的RGBA中關(guān)于整數(shù)和百分比值的轉(zhuǎn)換
這篇文章主要介紹了CSS3的RGBA中關(guān)于整數(shù)和百分比值的轉(zhuǎn)換,同時(shí)提到了關(guān)于瀏覽器的支持問題,需要的朋友可以參考下2015-08-04