|
導(dǎo)讀網(wǎng)頁(yè)的本質(zhì)就是超級(jí)文本標(biāo)記語(yǔ)言，通過(guò)結(jié)合使用其他的Web技術(shù)（如：腳本語(yǔ)言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁(yè)。因而，超級(jí)文本標(biāo)記語(yǔ)言是萬(wàn)維網(wǎng)（Web）編程的基礎(chǔ)，也就是說(shuō)萬(wàn)維網(wǎng)是建立... 網(wǎng)頁(yè)的本質(zhì)就是超級(jí)文本標(biāo)記語(yǔ)言，通過(guò)結(jié)合使用其他的Web技術(shù)（如：腳本語(yǔ)言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁(yè)。因而，超級(jí)文本標(biāo)記語(yǔ)言是萬(wàn)維網(wǎng)（Web）編程的基礎(chǔ)，也就是說(shuō)萬(wàn)維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級(jí)文本標(biāo)記語(yǔ)言之所以稱(chēng)為超文本標(biāo)記語(yǔ)言，是因?yàn)槲谋局邪怂^“超級(jí)鏈接”點(diǎn)。 本篇文章分享的是有關(guān)css3中的2D轉(zhuǎn)換和3D轉(zhuǎn)換，有一定的參考價(jià)值，希望對(duì)大家有所幫助通過(guò) 轉(zhuǎn)換，我們可以對(duì)元素進(jìn)行移動(dòng)、縮放、轉(zhuǎn)動(dòng)、拉長(zhǎng)或拉伸，需要注意瀏覽器的兼容問(wèn)題，在寫(xiě)程序的時(shí)候注意要寫(xiě)清楚 Chrome 和 Safari 需要前綴 -webkit-，Internet Explorer 9 需要前綴 -ms- Internet Explorer 10 和 Firefox 支持 3D 轉(zhuǎn)換但是Opera 仍然不支持 3D 轉(zhuǎn)換 推薦課程【css3】 2D轉(zhuǎn)換 translate()表示從其當(dāng)前位置移動(dòng)到設(shè)定的值,設(shè)定left值和top值 translate（100px,30px）//從左側(cè)移動(dòng)100px，從上往下移30px rotate()表示元素順時(shí)針旋轉(zhuǎn)所設(shè)定的角度，當(dāng)為負(fù)值時(shí)表示元素逆時(shí)針旋轉(zhuǎn) rotate(30deg)//順時(shí)針旋轉(zhuǎn)30度 scale()表示元素的尺寸會(huì)增加或減少設(shè)置寬度（X 軸）和高度（Y 軸） scale(3,4)//把寬度擴(kuò)大為原來(lái)的2倍，把高度變?yōu)樵瓉?lái)的4倍 skew()表示元素翻轉(zhuǎn)所設(shè)定的角度，設(shè)定X 軸和Y 軸 skew(30deg,20deg)//沿X軸把元素翻轉(zhuǎn)30度，沿Y軸翻轉(zhuǎn)20度 matrix() matrix() 方法就是一個(gè)總的2D方法包含數(shù)學(xué)函數(shù)，旋轉(zhuǎn)，縮放，移動(dòng)以及傾斜 matrix(0.866,0.5,-0.5,0.866,0,0） 例：
<style>
/*在chrome瀏覽器下運(yùn)行*/
div
{
width:200px;
height: 100px;
text-align: center;
line-height:100px;
background-color: pink;
-webkit-transform:translateX(150px);/*X軸移動(dòng)150px*/
-webkit-transform:rotate(-50deg);/*按逆時(shí)針旋轉(zhuǎn)50度*/
-webkit-transform:skew(20deg,20deg);/*沿X軸，Y軸旋轉(zhuǎn)20度*/
}
</style>效果圖
3D轉(zhuǎn)換 rotateX()表示沿X軸旋轉(zhuǎn)多少度，rotateY() 表示沿Y軸旋轉(zhuǎn) rotateX(30deg)//沿X軸旋轉(zhuǎn)30度 translate3d(x,y,z)：3D 轉(zhuǎn)化 translateX(x)適用用于 X 軸的值，translateY(y)適用于Y值，translateZ(z) 適用用于 Z 軸的值 translateX(100px)//向左移動(dòng)100px scale3d(x,y,z)：3D 縮放轉(zhuǎn)換。 scaleX(x) 給定一個(gè) X 軸的值, scaleY(y) 給定一個(gè) Y 軸的值,scaleZ(z) 給定一個(gè) Z 軸的值。 scaleX(1.5)//沿水平方向擴(kuò)大1.5倍 scaleX(0.5)//沿水平方向縮小0.5倍 rotate3d(x,y,z,angle) ：3D 旋轉(zhuǎn)。 rotateX(angle)沿 X 軸的 3D 旋轉(zhuǎn), rotateY(angle) 沿 Y 軸的 3D 旋轉(zhuǎn),rotateZ(angle)沿 Z 軸的 3D 旋轉(zhuǎn)。 rotateX(30deg)//沿X軸旋轉(zhuǎn)30度 perspective(n) 定義 3D 轉(zhuǎn)換元素的透視視圖。 但目前瀏覽器不支持這個(gè)效果 例
<style type="text/css">
.demo{
width: 100px;
height: 100px;
}
.box{
position: relative;
width: 100px;
height: 100px;
transform-style: preserve-3d;
transition: 1s;
}
.box1{
position: absolute;
width:100px;
height:100px;
background-color:pink;
}
.demo:hover .box{
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="demo">
<div class="box">
<div class="box1"></div>
</div>
</div>效果圖
總結(jié)：以上就是本篇文章的內(nèi)容了，希望對(duì)大家學(xué)習(xí)css3有所幫助。 以上就是css3中如何進(jìn)行2D和3D的轉(zhuǎn)化的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！ 網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。 |
溫馨提示：喜歡本站的話(huà)，請(qǐng)收藏一下本站！
本站發(fā)布的Win7純凈版系統(tǒng)、Win10純凈版和XP純凈版系統(tǒng)僅為個(gè)人學(xué)習(xí)測(cè)試使用，請(qǐng)?jiān)谙螺d后24小時(shí)內(nèi)刪除，不得用于任何商業(yè)用途，否則后果自負(fù)，請(qǐng)支持購(gòu)買(mǎi)微軟正版軟件！
本站所有資源全部來(lái)自于網(wǎng)絡(luò)資源,如侵犯到您的權(quán)益,請(qǐng)及時(shí)通知我們(peng896066052@126.com),我們會(huì)及時(shí)處理.
Copyright © 2018-2020 雨林木風(fēng)下載站
