CSS3除了為開發(fā)者提供二維變形之外，還將動(dòng)畫從二維平面推動(dòng)到了三維立體狀態(tài)，能夠?qū)崿F(xiàn)真正的三維特效。
雁山網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站開發(fā)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)于2013年創(chuàng)立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。
三維變形和二維變形一樣，均使用的是transform屬性。想要觸發(fā)三維變形有兩種方式：一種方式是通過語法告知瀏覽器“請(qǐng)采用三維方式進(jìn)行變形處理”，另一種方式是直接使用CSS3三維變形的語法。
觸發(fā)方法1：告知瀏覽器變形方式
-webkit-transform-style:preserve-3d;
Tips：IE不支持三維變形，在移動(dòng)端，絕大多數(shù)的瀏覽器均為WebKit內(nèi)核，因此，在此句代碼之前需要書寫-webkit-的前綴內(nèi)核。
Tips：不要為body元素設(shè)置-webkit- transform-style: preserve 3d,否則會(huì)對(duì)position:fixed定位的元素造成布局影響。在開發(fā)當(dāng)中，如果當(dāng)前元素屬于body的子級(jí)元素，又希望應(yīng)用三維變形，則在body和當(dāng)前元素之間多嵌套一層結(jié)構(gòu)，并為這層元素應(yīng)用三維變形即可。
觸發(fā)方法2：直接使用CSS3變形語法
!DOCTYPE?html
head
meta?charset="UTF-8"
title言成科技/title
style
.box1?{
width:?150px;
height:?150px;
border:?2px?solid?blue;
}
.box1?div?{
height:?150px;
background:?rgba(0,?0,?0,?0.5);
-webkit-transform:?translate3d(30px,?60px,?20px)?rotateX(30deg);
transform:?translate3d(30px,?60px,?20px)?rotateX(30deg);
}
/style
/head
body
div?class="box1"
div/div
/div
/body
/html
具體三維變形的具體屬性詳見《CSS3-3D相關(guān)知識(shí)詳解—視角以及變形方向》
3D效果制作
需求
制作一個(gè)立方體，并進(jìn)行旋轉(zhuǎn)
代碼實(shí)例
!DOCTYPE?HTML
html
head
meta?charset="utf-8"?/
title言成科技/title
link?rel="stylesheet"?type="text/css"?href=""?/
style
.main-bac?{?-webkit-perspective:1500;?}?/*設(shè)定透視距離*/
.main{
width:200px;?
height:200px;?
margin:?0?auto;
position:relative;
-webkit-transform-style:preserve-3d;
-webkit-transition:-webkit-transform?2s?ease?0s;/*過渡時(shí)間*/
}
/*基本樣式*/
.main?p{
position:?absolute;?
margin:?0;?
padding:?0;?
width:?200px;?
height:?200px;??
text-align:?center;?
line-height:?200px;?
font-size:?26px;?
opacity:0.5;
}
/*將第一個(gè)元素Z軸向前移動(dòng)100px，形成第一個(gè)面（正面）*/
.main?p:nth-of-type(1)?{
background-color:red;
-webkit-transform:translateZ(100px);
}
/*將第一個(gè)元素Z軸向前移動(dòng)100px，繞x軸旋轉(zhuǎn)90度形成上面的面*/
.main?p:nth-of-type(2)?{
background-color:orange;?
-webkit-transform:rotateX(90deg)?translateZ(100px);
}
/*將第一個(gè)元素Z軸向前移動(dòng)100px，繞x軸旋轉(zhuǎn)-90度形成下邊的面*/
.main?p:nth-of-type(3)?{
background-color:yellow;
-webkit-transform:rotateX(-90deg)?translateZ(100px);
}
/*將第一個(gè)元素Z軸向前移動(dòng)100px，繞y軸旋轉(zhuǎn)90度形成右側(cè)的面*/
.main?p:nth-of-type(4)?{
background-color:green;
-webkit-transform:rotateY(90deg)?translateZ(100px);
}
/*將第一個(gè)元素Z軸向前移動(dòng)100px，繞y軸旋轉(zhuǎn)-90度形成左側(cè)的面*/
.main?p:nth-of-type(5)?{
background-color:#b435bf;
-webkit-transform:rotateY(-90deg)?translateZ(100px);
}
/*將第一個(gè)元素Z軸向前移動(dòng)100px，繞y軸旋轉(zhuǎn)180度形成后面（背面）*/
.main?p:nth-of-type(6)?{
background-color:blue;
-webkit-transform:rotateY(180deg)?translateZ(100px);
}
/*鼠標(biāo)移入時(shí)繞Y軸旋轉(zhuǎn)180度，繞Z軸旋轉(zhuǎn)180度*/
.main:hover?{-webkit-transform:rotateY(180deg)?rotateZ(180deg);?}???
/style
/head
body
div?class="main-bac"
div?class="main"
p言成科技/p
p3D立方體/p
pHTML5學(xué)堂/p
p3D立方體/p
p碼匠/p
pJavaScript/p
/div??????????????
/div
/body
/html
代碼解析
當(dāng)鼠標(biāo)移入的時(shí)候，立方體逐漸的發(fā)生旋轉(zhuǎn)（非突變），圍繞X軸旋轉(zhuǎn)45度的同時(shí)，圍繞Y軸旋轉(zhuǎn)45度。
當(dāng)鼠標(biāo)移出立方體時(shí)，立方體恢復(fù)到初始狀態(tài)。在最開始狀態(tài)時(shí)，并沒有采用無限遠(yuǎn)的視角，設(shè)置一定的視角，讓剛開始時(shí)直視立方體時(shí)，不會(huì)覺得是一個(gè)平面。
3D效果制作-目標(biāo)效果圖
以上資料來源：《HTML5布局之路》
可以設(shè)置cookie（可以加載一個(gè)cookie.min.js，使用起來非常方便）。就是當(dāng)?shù)谝淮芜M(jìn)入頁面的時(shí)候，先去讀取該cookie，如果存在，說明之前已經(jīng)做了更改，把cookie值稍作處理就可以完成初始化了（記得當(dāng)初始化完成后刪除該cookie），如果cookie不存在說明還沒有做過更改。
html5使超鏈接特效消失的辦法如下
1.新建一個(gè)html文件,命名為test.html,用于講解html5超鏈接下劃線怎么去掉。
2.在test.html文件內(nèi),使用a標(biāo)簽創(chuàng)建一個(gè)鏈接,下面將使用css去掉該超鏈接的下劃線。
3.在test.html文件內(nèi),給a標(biāo)簽添加一個(gè)class屬性,屬性值為ttlink。
4.在test.html文件內(nèi),編寫標(biāo)簽,頁面的css樣式將寫在該標(biāo)簽內(nèi)。
在css標(biāo)簽內(nèi)，通過class該超鏈接的樣式，將text-decoration屬性設(shè)置為none，實(shí)現(xiàn)去掉鏈接的下劃線。
HTML5（WEB前端）的技術(shù)組成
HTML5（WEB前端）技術(shù)由HTML（結(jié)構(gòu)）、CSS（樣式）、JavaScript（行為）組成。
如何理解結(jié)構(gòu)、樣式與行為
簡(jiǎn)單來說，HTML5（WEB前端）是“將設(shè)計(jì)圖轉(zhuǎn)換為用戶查看的網(wǎng)頁”所需要的技術(shù)。
結(jié)構(gòu)實(shí)現(xiàn)的是網(wǎng)頁中的標(biāo)題、列表、圖片等標(biāo)簽。
樣式處理的是標(biāo)題文字的字體大小、顏色，圖片尺寸，某個(gè)標(biāo)簽的背景等。
行為可以實(shí)現(xiàn)網(wǎng)頁中的時(shí)間，電商網(wǎng)站當(dāng)中的倒計(jì)時(shí)效果，在注冊(cè)表單時(shí)用戶名是否重復(fù)的檢測(cè)，網(wǎng)站當(dāng)中頂部圖片的切換特效等等。
簡(jiǎn)單的理解結(jié)構(gòu)樣式和行為：將網(wǎng)頁看做一個(gè)裝修好的功能完備的房子，那么結(jié)構(gòu)實(shí)現(xiàn)的是房間以及家具的位置布局，樣式則是針對(duì)房間進(jìn)行裝飾，行為是為房間添加“開門”等功能。
鼠標(biāo)移上去時(shí)，改變li元素的大小、背景色、文字顏色等
代碼如下：
!DOCTYPE html
html
head
meta charset="utf-8"
title/title
style type="text/css"
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
width: 130px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 20px;
position: relative;
margin-left: 10px;
}
div {
width: 150px;
height: 500px;
border: 1px dashed #000000;
text-align: center;
}
.active {
background-color: green;
color: #fff;
}
.show {
width: 2px;
height: 20px;
position: absolute;
left: 10px;
top: 15px;
background-color: white;
}
.li1 {
left: 20px;
border-radius: 5px;
}
/style
/head
body
div id="div1"
ul
lispan/span雅望天堂1/li
lispan/span雅望天堂2/li
lispan/span雅望天堂3/li
lispan/span雅望天堂4/li
/ul
/div
script type="text/javascript"
var oLi = document.getElementsByTagName("li");
var oSpan = document.getElementsByTagName("span");
for (var i = 0; i oLi.length; i++) {
oLi[i].onmouseover = function() {
var sp = this.childNodes[0];
console.log(sp);
for (var i = 0; i oLi.length; i++) {
oLi[i].setAttribute("class", "");
oSpan[i].setAttribute("class", "");
}
this.setAttribute("class", "active li1");
sp.setAttribute("class", "show");
}
oLi[i].onmouseout = function() {
for (var i = 0; i oLi.length; i++) {
oLi[i].setAttribute("class", "");
}
}
}
/script
/body
/html
這應(yīng)該是你要的效果
方法/步驟
HTML結(jié)構(gòu)
該鼠標(biāo)點(diǎn)擊按鈕特效中每一個(gè)可點(diǎn)擊的元素都是一個(gè)button按鈕
CSS樣式
以下是該css3點(diǎn)擊按鈕特效的通用CSS樣式：
插件中通過在點(diǎn)擊按鈕時(shí)使用javascript來為它添加相應(yīng)的動(dòng)畫CLASS來執(zhí)行動(dòng)畫效果：
上面的CSS代碼可以生成如下圖的動(dòng)畫效果：
在“Stana”效果中，使用了html5 SVG clipPath，在它上面添加了一個(gè)transition。這個(gè)效果只能在Chrome瀏覽器中才能看到效果。
在“Stoja”效果中使用了CSS clip-path屬性，這個(gè)效果也需要瀏覽器的支持才能看得到的。
重慶分公司
重慶分公司
