利用HTML5+CSS3實(shí)現(xiàn)3D轉(zhuǎn)換效果實(shí)例詳解
發(fā)布時(shí)間：2017-05-02 16:25:29 作者：lms_碼農(nóng) 
我要評(píng)論
我要評(píng)論對(duì)于css的二維世界，相信大家都不陌生。在二維的世界里，我們可以對(duì)元素設(shè)置寬高、位置、旋轉(zhuǎn)、背景等等。在css三維世界里，擴(kuò)展出了一個(gè)z軸，這個(gè)z軸垂直于屏幕并指向外面。下面這篇文章主要給大家介紹了利用HTML5+CSS3實(shí)現(xiàn)3D轉(zhuǎn)換效果的相關(guān)資料，需要的朋友可以參考。
前言
本文介紹的是css3的3d模塊，對(duì)大家具有一定的參考價(jià)值，感興趣的朋友們下面來(lái)一起看看吧。
介紹
首先，我們來(lái)了解一下3d的坐標(biāo)系，x軸在屏幕上為水平方向，y軸為垂直方向，而z軸為垂直于屏幕的方向。
不理解的話可以參考定位屬性的z-index屬性，那個(gè)在某種意義上就是讓元素在z軸的移動(dòng)。
在2d轉(zhuǎn)換模塊中我們研究了rotateX()和rotateY()方法，就是繞x軸和y軸旋轉(zhuǎn)，這其實(shí)就是3d模塊的一種表現(xiàn)，當(dāng)然要看到近大遠(yuǎn)小的3d效果，還需要在父元素上添加透視屬性：transform:perspective（500px）;值為透視點(diǎn)到元素的距離，具體概念請(qǐng)看美術(shù)透視教學(xué)。。。。
多說(shuō)無(wú)益，上代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
margin: 0 auto;
}
.div1{
margin-top: 100px;
transform:perspective(500px) rotatey(0deg);
position: relative;
border:1px solid #000000;
background-color: #ff0000;
}
.div1 div{
transform:rotatey(45deg);
position: absolute;
font-size: 80px;
line-height: 200px;
text-align: center;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="div1">
<div class="div1_1">1</div>
</div>
</body>
</html>
效果圖：
但是，你會(huì)發(fā)現(xiàn)當(dāng)父元素轉(zhuǎn)到90度的時(shí)候元素消失了，這就說(shuō)明元素是沒(méi)有厚度的。說(shuō)明元素雖然具有了近大遠(yuǎn)小的透視屬性，但本質(zhì)上仍是2d的。
這是你需要添加transform-style:preserve-3d;樣式來(lái)讓元素在3d空間中轉(zhuǎn)換。這樣，元素就處在了3維的空間里，當(dāng)父元素旋轉(zhuǎn)90度，仍能看到里面的子元素。
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
margin: 0 auto;
}
.div1{
margin-top: 100px;
transform:perspective(500px) rotatey(0deg);
transform-style:preserve-3d;
position: relative;
border:1px solid #000000;
}
.div1 div{
background-color: #ff0000;
transform:rotatey(45deg);
position: absolute;
font-size: 80px;
line-height: 200px;
text-align: center;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="div1">
<div class="div1_1">1</div>
</div>
</body>
</html>
效果圖：
上面，我們對(duì)3d轉(zhuǎn)換模塊有了一個(gè)初步的了解，下面我們一起做一個(gè)正方體，來(lái)整理一下3d模塊的知識(shí)。
一步步來(lái)做著寫(xiě)太過(guò)麻煩，我就將過(guò)程寫(xiě)在代碼的注釋里，小伙伴們請(qǐng)見(jiàn)諒。
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轉(zhuǎn)換模塊-正方體</title>
<style>
*{
margin: 0;
padding: 0;
/*去除默認(rèn)邊距*/
}
ul{
width: 200px;
height: 200px;
border: 1px solid #000;
box-sizing: border-box;
margin: 100px auto;
position: relative;
/*修改基本樣式*/
transform: rotateY(45deg) rotateX(45deg);
/*旋轉(zhuǎn)看看效果*/
transform-style: preserve-3d;
/*將父元素設(shè)置為3d空間*/
}
ul li{
list-style: none;
width: 200px;
height: 200px;
font-size: 60px;
text-align: center;
line-height: 200px;
position: absolute;
left: 0;
top: 0;
/*修改基本樣式*/
}
ul li:nth-child(1){
background-color: red;
transform: translateX(-100px) rotateY(90deg);
/*將第一個(gè)l向左移動(dòng)100像素，然后繞y軸旋轉(zhuǎn)90度，形成左邊的面*/
}
ul li:nth-child(2){
background-color: green;
transform: translateX(100px) rotateY(90deg);
/*將第一個(gè)2向右移動(dòng)100像素，然后繞y軸旋轉(zhuǎn)90度*，形成右邊的面*/
}
ul li:nth-child(3){
background-color: blue;
transform: translateY(-100px) rotateX(90deg);
/*將第一個(gè)3向上移動(dòng)100像素，然后繞x軸旋轉(zhuǎn)90度，形成上面的面*/
}
ul li:nth-child(4){
background-color: yellow;
transform: translateY(100px) rotateX(90deg);
/*將第一個(gè)4向下移動(dòng)100像素，然后繞x軸旋轉(zhuǎn)90度*/
}
ul li:nth-child(5){
background-color: purple;
transform: translateZ(-100px);
/*將第一個(gè)5向后移動(dòng)100像素，形成后面的面*/
}
ul li:nth-child(6){
background-color: pink;
transform: translateZ(100px);
/*將第一個(gè)l向前移動(dòng)100像素，形成前面的面*/
}
</style>
</head>
<body>
<ul>
<!--首先做好html布局，正方體有6個(gè)面，所以寫(xiě)了6個(gè)li-->
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
效果圖：
這個(gè)方法比較好理解，理解了之后請(qǐng)看下一個(gè)。
代碼在下面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
margin: 0 auto;
/*修改基本樣式*/
}
.div1{
margin-top: 100px;
transform: perspective(400px) rotatex(0deg) rotatey(0deg);
/*擁有近大遠(yuǎn)小透視效果*/
transform-style: preserve-3d;
/*設(shè)置為3d空間*/
position: relative;
border:1px solid #000000;
animation: xuanzhuan 5s cubic-bezier(0.0,0.0,0.0,0.0) infinite forwards;
/*旋轉(zhuǎn)動(dòng)畫(huà)*/
}
.div1 div{
position: absolute;
font-size: 80px;
line-height: 200px;
text-align: center;
top: 0;
left: 0;
/*內(nèi)部樣式*/
}
.div1_1{
transform: translatez(100px);
background-color: red;
/*向前移動(dòng)100像素，作為最前面的面*/
}
.div1_2{
transform: rotatex(90deg) translatez(100px);
background-color:green;
/*繞x軸旋轉(zhuǎn)90度，在z軸正方向移動(dòng)100像素，作為上面的面*/
/*注：旋轉(zhuǎn)時(shí)坐標(biāo)系會(huì)跟著一起旋轉(zhuǎn)，z軸原來(lái)是垂直屏幕向外的，繞x軸旋轉(zhuǎn)90度以后就是在屏幕上向上的方向*/
}
.div1_3{
transform: rotatex(180deg) translatez(100px);
background-color: blue;
/*繞x軸旋轉(zhuǎn)180度，這時(shí)z軸垂直屏幕向內(nèi)，在z軸正方向移動(dòng)100像素，作為后面的面*/
}
.div1_4{
transform: rotatex(270deg) translatez(100px);
background-color: purple;
/*繞x軸旋轉(zhuǎn)270度，這時(shí)z軸向下，在z軸正方向移動(dòng)100像素，作為下面的面*/
}
.div1_5{
transform: rotatey(90deg) translatez(100px);
background-color: pink;
/*繞y軸旋轉(zhuǎn)90度，這時(shí)z軸向右，在z軸正方向移動(dòng)100像素，作為右面的面*/
}
.div1_6{
transform: rotatey(270deg) translatez(100px);
background-color: yellow;
/*繞y軸旋轉(zhuǎn)90度，這時(shí)z軸向左，在z軸正方向移動(dòng)100像素，作為左面的面*/
}
@-webkit-keyframes xuanzhuan{
from{
transform:perspective(400px) rotatex(0deg);
}
to{
transform:perspective(400px) rotatex(360deg);
}
}
.div1:hover{
transform: perspective(400px) scale(1.5);
animation: xuanzhuan 5s cubic-bezier(0.0,0.0,0.0,0.0) infinite paused forwards;
/*有hover事件是動(dòng)畫(huà)暫停*/
}
</style>
</head>
<body>
<div class="div1">
<div class="div1_1">1</div>
<div class="div1_2">2</div>
<div class="div1_3">3</div>
<div class="div1_4">4</div>
<div class="div1_5">5</div>
<div class="div1_6">6</div>
</div>
<!--html標(biāo)簽布局-->
</body>
</html>
效果圖：
這種寫(xiě)法只要理解了，寫(xiě)起來(lái)會(huì)更加的方便，而且不不用去考慮轉(zhuǎn)換的角度不對(duì)會(huì)導(dǎo)致內(nèi)容是反的，所以推薦這一種寫(xiě)法。當(dāng)然這種寫(xiě)法在x軸和y軸一起旋轉(zhuǎn)是也會(huì)造成內(nèi)容的反轉(zhuǎn)。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
用css3實(shí)現(xiàn)轉(zhuǎn)換過(guò)渡和動(dòng)畫(huà)效果
這篇文章主要介紹了用css3實(shí)現(xiàn)轉(zhuǎn)換過(guò)渡和動(dòng)畫(huà)效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-13css3學(xué)習(xí)之2D轉(zhuǎn)換功能詳解
眾所周知在css3中出現(xiàn)了許多新的特性，其中2D轉(zhuǎn)換我覺(jué)的非常有意思，通過(guò)它我們能夠?qū)υ剡M(jìn)行移動(dòng)、縮放、轉(zhuǎn)動(dòng)、拉長(zhǎng)或者拉伸，所以希望在這里和大家分享一下。有需要的朋2016-12-23CSS3的RGBA中關(guān)于整數(shù)和百分比值的轉(zhuǎn)換
這篇文章主要介紹了CSS3的RGBA中關(guān)于整數(shù)和百分比值的轉(zhuǎn)換,同時(shí)提到了關(guān)于瀏覽器的支持問(wèn)題,需要的朋友可以參考下2015-08-04
css3帶你實(shí)現(xiàn)3D轉(zhuǎn)換效果
這篇文章主要介紹了css3帶你實(shí)現(xiàn)3D轉(zhuǎn)換效果,本篇的3D轉(zhuǎn)換就是基于原來(lái)的2D轉(zhuǎn)換而來(lái)，與2D轉(zhuǎn)換的功能相似，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-02-18
