国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁(yè)
  2. >Toy博客

響應(yīng)式Web開發(fā)項(xiàng)目教程（HTML5+CSS3+Bootstrap）第2版 例3-4 CSS 立方體

2年前作者：m0_73657966分類：Toy博客閱讀(30)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了響應(yīng)式Web開發(fā)項(xiàng)目教程（HTML5+CSS3+Bootstrap）第2版 例3-4 CSS 立方體。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

代碼

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 立方體</title>
<link href="CSS/style.css" rel="stylesheet" type="text/css">
<style>
.box {
    width: 200px;
    height: 200px;
    position: relative;
    /*透視:1000px（元素距視圖的距離為1000px）*/
    perspective: 1000px;
    /*定義子元素保留3D位置*/
    transform-style: preserve-3d;
    transform: translate(150px, 100px) rotateX(-30deg) rotateY(30deg);
}
</style>
</head>

<body>
<div class="box">
  <div class="front">1</div>
  <div class="back">2</div>
  <div class="left">3</div>
  <div class="right">4</div>
  <div class="top">5</div>
  <div class="bottom">6</div>
</div>
</body>
</html>

上述代碼中：
第8~17行代碼定義了3D環(huán)境容器，設(shè)置transform-style:的值為preserve-3d（設(shè)置3D環(huán)境）；
第13行代碼設(shè)置perspective:的值為1000px（元素距視圖的距離為1000px）;
第11行代碼設(shè)置position的值為relative（相對(duì)定位）；
第16行代碼的作用是設(shè)置3D容器的位移和旋轉(zhuǎn)角度；
第23~28行代碼定義了立方體每個(gè)面的結(jié)構(gòu)。

運(yùn)行效果

響應(yīng)式Web開發(fā)項(xiàng)目教程（HTML5+CSS3+Bootstrap）第2版 例3-4 CSS 立方體,前端,css,html5
3D變形是指某一個(gè)元素圍繞其x軸、y軸和z軸進(jìn)行旋轉(zhuǎn)。由于計(jì)算機(jī)屏幕是二維平面，所以需要通過(guò)perspective屬性才可以實(shí)現(xiàn)視覺上的3D效果。
如果不做perspective（透視）設(shè)置是無(wú)法實(shí)現(xiàn)立方體效果的；而不設(shè)置 transform-style: preserve-3d;屬性，則會(huì)使得這個(gè)立方體是“扁”的。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-790215.html

到了這里，關(guān)于響應(yīng)式Web開發(fā)項(xiàng)目教程（HTML5+CSS3+Bootstrap）第2版 例3-4 CSS 立方體的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包