啦啦啦啦视频资源免费观看,久久国产福利播放,爱情岛亚洲品质永久入口,黑人顶到深处高潮颤抖,看国产美女Av,天堂网在线最新版www中文网,亚洲第一大成网站,在线视频亚洲久热,呦男呦女视频8区,193AV尤物影院在线观看,免费网禁国产you女网站下载,日韩一区二区三区视频,在线观看,大香伊蕉欧美最新视频,亚洲有狼网站狠狼鲁亚洲下载,俄罗斯雏妓的bbb孩交,激情综合婷婷丁香五月蜜桃,2021精品国产片久久免费看

咨詢電話：024-31891684

網(wǎng)站建設(shè)|注冊(cè)|登錄 | 易勢(shì)大連分公司

沈陽網(wǎng)站制作易勢(shì)最專業(yè)！

，必須設(shè)置"/> ，-1為搜索整個(gè)頻道"/>
 

【html5】3D立方體旋轉(zhuǎn)——鼠標(biāo)/鍵盤可控旋轉(zhuǎn)方向 當(dāng)前位置：首頁>主要服務(wù)>網(wǎng)站制作>html

　　要想實(shí)現(xiàn)3D的效果

，其實(shí)非常簡單
，只需指定一個(gè)元素為容器并設(shè)置transform-style：preserve-3d
，那么它的后代元素便會(huì)有3D效果
。不過有很多需要注意的地方，這里把我學(xué)習(xí)的方法
，過程分享給大家
。再講知識(shí)點(diǎn)之前，還是先弄清楚3D的坐標(biāo)系吧
，從網(wǎng)上搜了一張經(jīng)典坐標(biāo)系圖
，供大家回顧一下。

1

、3D試圖

　　transform-style：flat(默認(rèn)

，二維效果) / preserve-3d(三維效果)。設(shè)置一個(gè)元素的transform-style:preserve-3d
；只影響這個(gè)元素的子元素(如果孫元素也有3d效果
，那么還必須給子元素設(shè)置preserve-3d)。這樣所有子元素都可以相對(duì)與父元素的平面進(jìn)行3d變形操作
。和二維變形一樣
，三維變形可以使用transform屬性來設(shè)置?div id="jfovm50" class="index-wrap">？梢酝ㄟ^制定的函數(shù)或者通過三維矩陣來對(duì)元素變型
。列舉幾個(gè)函數(shù)：

　　translate3d(x,y,z) 使元素在這三個(gè)緯度中移動(dòng),也可以分開寫，如：translateX(length),translateY(length), translateZ(length)

。注意z軸的值只能為px;

　　scale3d(number,number,number) 使元素在這三個(gè)緯度中縮放

，也可分開寫，如：scaleX(),scaleY(),scaleY()
。

　　rotateX(angle) 是元素依照x軸旋轉(zhuǎn)

；

　　rotateY(angle) 是元素依照y軸旋轉(zhuǎn)；

　　rotateZ(angle) 是元素依照z軸旋轉(zhuǎn)。

2

、透視/景深效果

　　perspective(length) 為一個(gè)元素設(shè)置三維透視的距離

。僅作用于元素的后代，而不是其元素本身
。當(dāng)perspective:none/0;時(shí)
，相當(dāng)于沒有設(shè)perspective(length)。比如你要建立一個(gè)小立方體
，長寬高都是200px
。如果你的perspective < 200px ，那就相當(dāng)于站在盒子里面看的結(jié)果
，如果perspective 非常大那就是站在非常遠(yuǎn)的地方看（立方體已經(jīng)成了小正方形了）
。

　　當(dāng)元素沒有設(shè)置perspective(length)時(shí)，所有后代元素被壓縮在同一個(gè)二維平面上

，不存在景深的效果
。如果設(shè)置perspective(length)后，將會(huì)看到三維的效果
。默認(rèn)的透視視角中心在容器(是perspective所在的元素
，不是他的后代元素)的中點(diǎn)，也就是perspective-origin: 50% 50%
。當(dāng)然你也可以自己設(shè)置
，比如：左上角-webkit-perspective-origin: 0px 0px；
。

　　綜合以上兩點(diǎn)

，我們可以通過幾個(gè)實(shí)例，來深入了解下perspective(length);  和  transform-style:preserve-3d
；

　　?div id="jfovm50" class="index-wrap">。?）當(dāng)設(shè)置perspective(length);不設(shè)置transform-style:preserve-3d；當(dāng)元素靜止時(shí)

，會(huì)有立體的效果：

　　?div id="m50uktp" class="box-center"> 。?）當(dāng)設(shè)置perspective(length);不設(shè)置transform-style:preserve-3d；當(dāng)元素旋轉(zhuǎn)時(shí)的效果：

　　　　　　

　　?div id="m50uktp" class="box-center"> 。?）當(dāng)設(shè)置transform-style:preserve-3d

；不設(shè)置perspective(length);當(dāng)元素靜止時(shí)，不會(huì)有立體的效果
。

　　?div id="m50uktp" class="box-center"> 。?）當(dāng)設(shè)置perspective(length);不設(shè)置transform-style:preserve-3d；當(dāng)元素旋轉(zhuǎn)時(shí)的效果：

　　?div id="m50uktp" class="box-center"> 。?）只有當(dāng)兩個(gè)值都設(shè)置

，不管是靜止還是旋轉(zhuǎn)，都會(huì)看到立體的效果。

注意：（1）如果一個(gè)元素以x軸或y軸旋轉(zhuǎn)90度以上的話

，那么它的背面將面向用戶
。背面的元素始終是透明的，所以用戶通過后面看到正面的反向形態(tài)
，就像是從在玻璃門后面看對(duì)外張貼的標(biāo)志
。為了防止顯示鏡像的前面?div id="m50uktp" class="box-center"> ？梢詫ackface-visibility設(shè)置為hidden;如果backface-visibility:hidden;那么這個(gè)元素就不會(huì)在背面可見了
。這么做的一個(gè)原因就是，想一個(gè)元素有兩個(gè)面
，就像一個(gè)撲克牌
。比如：創(chuàng)建一張撲克牌
，正面和背面一定不一樣
，這兩個(gè)面的位置是背靠背的。這兩個(gè)元素一起轉(zhuǎn)動(dòng)
，正面逐步向后反轉(zhuǎn)隱藏

沈陽網(wǎng)站制作--網(wǎng)站前臺(tái)效果

易勢(shì)網(wǎng)站制作

，以DIV+CSS為主，js/jQuery為輔
，制作利于優(yōu)化
，頁面美觀的優(yōu)質(zhì)網(wǎng)站！

top

網(wǎng)絡(luò)策劃公司|新浪官方微博|大連網(wǎng)站建設(shè)