標(biāo)準(zhǔn)格式注意：

super()和this()調(diào)用語(yǔ)句不能同時(shí)在一個(gè)構(gòu)造器中。

super()或this()調(diào)用語(yǔ)句只能作為構(gòu)造器中的第一句出現(xiàn)。原因：

無(wú)論通過(guò)哪個(gè)構(gòu)造器創(chuàng)建子類對(duì)象，需要保證先初始化父類。

目的是，當(dāng)子類繼承父類后，“繼承”父類所有的屬性和方法，因此子類有必要知道父類如何為對(duì)象進(jìn)行初始化。

從結(jié)果上看：繼承性

子類繼承父類以后，就獲取了父類中聲明的屬性或方法。

創(chuàng)建子類的對(duì)象，在堆空間中，就會(huì)加載所父類中聲明的屬性。

從過(guò)程上看：

當(dāng)我們通過(guò)子類的構(gòu)造器創(chuàng)建子類對(duì)象時(shí)，我們一定會(huì)直接或間接的調(diào)用其父類的構(gòu)造器，進(jìn)而調(diào)用父類的父類的構(gòu)造器，…直到調(diào)用了java.lang.Object類中空參的構(gòu)造器為止。正因?yàn)榧虞d過(guò)所的父類的結(jié)構(gòu)，所以才可以看到內(nèi)存中父類中的結(jié)構(gòu)，子類對(duì)象才可以考慮進(jìn)行調(diào)用。

強(qiáng)調(diào)說(shuō)明：

雖然創(chuàng)建子類對(duì)象時(shí)，調(diào)用了父類的構(gòu)造器，但是自始至終就創(chuàng)建過(guò)一個(gè)對(duì)象，即為new的子類對(duì)象。

html標(biāo)簽分為兩種，內(nèi)聯(lián)元素和塊級(jí)元素，首先我們先了解一下內(nèi)聯(lián)元素和塊級(jí)元素的概念：



塊級(jí)元素：一般是其它元素的容器，可容納內(nèi)聯(lián)元素和其它塊級(jí)元素，塊級(jí)元素排斥其它元素與其位于同一行，可設(shè)置寬度(width)高度(height)屬性，正常流中的塊級(jí)元素會(huì)垂直擺放。常見(jiàn)塊狀元素為“div”



內(nèi)聯(lián)元素（行內(nèi)元素）：內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素，是塊級(jí)元素的后代，它允許其他內(nèi)聯(lián)元素與其位于同一行，不能設(shè)置高度（height）和寬度（width）。常見(jiàn)內(nèi)聯(lián)元素為“a”。



根據(jù)塊級(jí)元素的概念我們可以理解為塊級(jí)元素前后帶有換行符，也就相當(dāng)于元素前后加了一個(gè)<br>標(biāo)簽。我們可以把塊級(jí)元素想象成一個(gè)塊或一個(gè)矩形，所以塊級(jí)元素能設(shè)置高度寬度屬性



新建一個(gè)前端學(xué)習(xí)qun438905713，在群里大多數(shù)都是零基礎(chǔ)學(xué)習(xí)者，大家相互幫助，相互解答，并且還準(zhǔn)備很多學(xué)習(xí)資料，歡迎零基礎(chǔ)的小伙伴來(lái)一起交流。

例：

css文件:

 



復(fù)制代碼



代碼如下:

div1{ 

width:200px; 

height:200px; 

background:#666 

} 

div2{ 

width:200px; 

height:200px; 

background:#F00 

}





html文件： 

 



復(fù)制代碼



代碼如下:





<div id="div1"> 

div1 

塊級(jí)元素排斥其他元素與其位于同一行 

</div> 

<div id="div2"> 

div2 

塊級(jí)元素排斥其他元素與其位于同一行 

</div>





顯示效果： 



兩個(gè)div元素不位于同一行



 



根據(jù)內(nèi)聯(lián)元素的概念，我們可以理解為內(nèi)聯(lián)元素前后沒(méi)有換行符。我們可以把內(nèi)聯(lián)元素想象成一條線，所以它不能設(shè)置height屬性和width屬性。



塊級(jí)元素（block element）標(biāo)簽



address -地址

blockquote - 塊引用

center – 居中對(duì)齊

dir -目錄列表

div - 常用塊級(jí)容易，也是CSS layout的主要標(biāo)簽

dl - 定義列表

fieldset - form控制組

form - 交互表單

h1 - 大標(biāo)題

h2 - 副標(biāo)題

h3 - 3級(jí)標(biāo)題

h4 - 4級(jí)標(biāo)題

h5 - 5級(jí)標(biāo)題

h6 - 6級(jí)標(biāo)題

hr - 水平分隔線

isindex - input prompt

menu - 菜單列表

noframes - frames可選內(nèi)容，（對(duì)于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容

noscript - 可選腳本內(nèi)容（對(duì)于不支持script的瀏覽器顯示此內(nèi)容）

ol - 排序表單

p - 段落

pre - 格式化文本

table - 表格

ul - 非排序列表



內(nèi)聯(lián)元素(inline element)



a - 錨點(diǎn)

abbr - 縮寫(xiě)

acronym - 首字

b - 粗體(不推薦)

bdo - bidi override

big - 大字體

br - 換行

cite - 引用

code - 計(jì)算機(jī)代碼(在引用源碼的時(shí)候需要)

dfn - 定義字段

em - 強(qiáng)調(diào)

font - 字體設(shè)定(不推薦)

i - 斜體

img - 圖片

input - 輸入框

kbd - 定義鍵盤(pán)文本

label - 表格標(biāo)簽

q - 短引用

s - 中劃線

samp - 定義范例計(jì)算機(jī)代碼

select - 項(xiàng)目選擇

small - 小字體文本

span - 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊

strike - 中劃線

strong - 粗體強(qiáng)調(diào)

sub - 下標(biāo)

sup - 上標(biāo)

textarea - 多行文本輸入框

tt - 定義打字機(jī)文本

————————————————

版權(quán)聲明：本文為CSDN博主「前端學(xué)習(xí)線路」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/webxuexi168/article/details/104382660

一、你能學(xué)到什么？

①如何使用css變量 ②實(shí)現(xiàn)圣杯布局和雙飛翼的簡(jiǎn)單思路 ③了解浮動(dòng)和margin的特性



css變量設(shè)置(兩個(gè)布局都有的部分)

:root{

    / 左邊欄寬度 /

    --lw:300px;

    /負(fù)左邊欄寬度/

    --lwf:-300px;

    / 右邊欄寬度 /

    --rw:400px;

    /負(fù)左邊欄寬度/

    --rwf:-400px;

    / 高度 /

    --height:300px;

}



二、圣杯布局的html和css代碼

html部分

  <div class="holyGrail">

    <div class="hg_main">main</div>

    <div class="hg_left">left</div>

    <div class="hg_right">right</div>

  </div>



css 實(shí)現(xiàn)對(duì)應(yīng)的四個(gè)class

.holyGrail {

    height: var(--height);

    / 留出左右兩欄的布局 為了字體不被覆蓋/

    padding-left: var(--lw);

    padding-right: var(--rw);

}

.hg_main{

    width:100%;

    float: left;

    height: var(--height);

    background-color: blanchedalmond;

}

.hg_left{

    position: relative;

    left: var(--lwf);

    float: left;

    margin-left: -100%;

    width:var(--lw);

    height: var(--height);

    background-color: blueviolet;

}

.hg_right{

    float: left;

    margin-right: var(--rwf);

    width:var(--rw);

    height: var(--height);

    background-color: brown;

}





三、雙飛翼布局的html和css代碼

html部分

<div class="doubleWing">

    <div class="dw_main">

      <div class="dw_con">main</div>

    </div>

    <div class="dw_left">left</div>

    <div class="dw_right">right</div>

  </div>



css 實(shí)現(xiàn)對(duì)應(yīng)的五個(gè)class

.doubleWing{

    padding-right: var(--rw);

}

.dw_left{

    float: left;

    margin-left: -100%;

    width:var(--lw);

    height: var(--height);

    background-color: blueviolet;

}

.dw_main{

    width:100%;

    float: left;

    height: var(--height);

    background-color: blanchedalmond;

}

.dw_con {

margin-left: var(--lw);

}

.dw_right{

    float: left;

    margin-right: var(--rwf);

    width:var(--rw);

    background-color: brown;

    height: var(--height); 

}



四、學(xué)會(huì)兩個(gè)布局的注意點(diǎn)

圣杯布局

在最外邊的類（holyGrail）左右要留出左欄和右欄的寬度（使用padding-left，padding-right)

中間的div.hg_main放在最上面，優(yōu)先渲染，中間div自適應(yīng)，width為100%

左中右欄的div都設(shè)置浮動(dòng)，左欄通過(guò)margin-left:-100%移動(dòng)到和中間的div同一起點(diǎn)，然后通過(guò)position: relative;

left: -（左欄的寬度）；會(huì)移動(dòng)到最外層div的左內(nèi)邊距的區(qū)域（中間div的左邊）

右欄可以通過(guò)margin-right:-(右欄的寬度)；移動(dòng)到最外層div的右內(nèi)邊距的區(qū)域（中間div的右邊）

雙飛翼布局

在中欄的div再加一個(gè)div,設(shè)置margin-left:左欄的寬度，這樣可以省略左欄的div使用postion和left的屬性移動(dòng)

最外層的div可以不用預(yù)留左欄的位置了

五、兩個(gè)布局的對(duì)比的優(yōu)缺點(diǎn)

布局 優(yōu)點(diǎn) 缺點(diǎn)

圣杯 無(wú)多余dom 當(dāng)中間的寬度小于左右的寬度時(shí)，結(jié)構(gòu)混亂

雙飛翼 可以支持各種寬度，通用性強(qiáng)較強(qiáng) 需要多加一層dom

代碼下載地址

記得一定要自己去實(shí)現(xiàn)一下

CSS 選擇器分組



CSS選擇器分組，可以把定義相同屬性的不同標(biāo)簽做為一組處理，縮短了CSS樣式編寫(xiě)的時(shí)間和CSS樣式表的大小。



例如希望h2和p標(biāo)簽的字體顏色都設(shè)置為黑色，則可以寫(xiě)成：



h2,p{color:black;}

通過(guò)分組，可以將相同屬性的樣式“壓縮”在一起，這樣就可以得到更簡(jiǎn)潔的樣式表。例如：



/ no grouping /

h1 {color:blue;}

h2 {color:blue;}

h3 {color:blue;}

h4 {color:blue;}

h5 {color:blue;}

h6 {color:blue;}



/ grouping /

h1, h2, h3, h4, h5, h6 {color:blue;}



當(dāng)有多個(gè)標(biāo)簽有相同屬性時(shí)，可以抽出相同屬性進(jìn)行分組，不同的屬性另外書(shū)寫(xiě)樣式。



除了使用標(biāo)簽來(lái)進(jìn)行相同標(biāo)簽CSS選擇外，還可以使用類選擇器來(lái)選擇。



類選擇器前面使用符號(hào).



(1)基本使用



為了將類選擇器的樣式與元素關(guān)聯(lián)，必須將 class 指定為一個(gè)適當(dāng)?shù)闹怠＠纾?br />


<h1 class="important">This heading is very important.</h1>

<p class="important">This paragraph is very important.</p>

在樣式表中定義：



.important {color:red;}

這樣定義后，class為important的h1和p標(biāo)簽的字體顏色也就都是紅色。



(2)結(jié)合元素選擇器



類選擇器可以結(jié)合元素選擇器來(lái)使用。



例如，您可能希望只有段落顯示為紅色文本：



p.important {color:red;}

這個(gè)樣式表示的是，所有class為important ，且為p標(biāo)簽的元素中的字體為紅色。其他標(biāo)簽的無(wú)效。



(3)CSS 多類選擇器



一個(gè)標(biāo)簽可以定義多class，則這個(gè)標(biāo)簽有這多個(gè)class的所有屬性，例如：



<p class="important warning">This paragraph is a very 

important warning.</p>





.important {font-weight:bold;}

.warning {color:red;}



例子中為p標(biāo)簽定義了important和warning兩個(gè)class,所以p標(biāo)簽的字體是加粗且字體顏色是紅色的。

————————————————

版權(quán)聲明：本文為CSDN博主「前端學(xué)習(xí)線路」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/webxuexi168/article/details/104349157

javascript中window.open()與window.location.href的區(qū)別

window.open(‘index.html’) 表示新增一個(gè)窗口打開(kāi) index.html 這個(gè)頁(yè)面，并不刷新

location.href(‘index.html’) 表示在當(dāng)前窗口重定向到新頁(yè)面，打開(kāi)并刷新 index.html 這個(gè)頁(yè)面



window.location 是 window 對(duì)象的屬性，用來(lái)替換當(dāng)前頁(yè)，也就是重新定位當(dāng)前頁(yè)

而window.open 是 window 對(duì)象的方法，是用來(lái)打開(kāi)一個(gè)新窗口的函數(shù)



// 打開(kāi)新頁(yè)面

// 注意：有些瀏覽器的安全設(shè)置會(huì)將window.open()屏蔽，例如避免彈出廣告窗

window.open('./index.html');



// 在原窗口打開(kāi)新頁(yè)面

window.location.href＝"./index.html";



window.open()詳解



window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no')





參數(shù)解釋： 三個(gè)參數(shù)

window.open 彈出新窗口的命令；

‘page.html’ 彈出窗口的文件名；

‘newPage’ 彈出窗口的名字（不是文件名），非必須，可用空’'代替；

height=100 窗口高度；

width=400 窗口寬度；

top=0 窗口距離屏幕上方的象素值；

left=0 窗口距離屏幕左側(cè)的象素值；

toolbar=no 是否顯示工具欄，yes為顯示；

menubar=no 是否顯示菜單欄，yes為顯示；

scrollbars=no 是否顯示滾動(dòng)欄，yes為顯示；

resizable=no 是否允許改變窗口大小，yes為允許；

location=no 是否顯示地址欄，yes為允許；

status=no 是否顯示狀態(tài)欄內(nèi)的信息（通常是文件已經(jīng)打開(kāi)），yes為允許；



常用的js返回與刷新頁(yè)面

在此用a標(biāo)簽舉例





<a href="javascript: history.back(-1)">返回上一頁(yè)</a> 

<a href="javascript:history.go(-1)">返回上一頁(yè)</a> 

<a href="javascript:history.go(-2)">返回前兩頁(yè)</a> 

<a href="javascript:location.reload()">刷新當(dāng)前頁(yè)面</a> 

<a href="javascript:" onclick="self.location=document.referrer;">返回上一頁(yè)并刷新</a> 





js





// 刷新當(dāng)前頁(yè)面

window.location.Reload();

self.location.reload();

window.location.href = window.location.href;

轉(zhuǎn)自：站酷-姚成浩

彈性布局（Flex）

隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，對(duì)于網(wǎng)頁(yè)布局來(lái)說(shuō)要求越來(lái)越高，而傳統(tǒng)的布局方案對(duì)于實(shí)現(xiàn)特殊布局非常不方便，比如垂直居中。

2009年，W3C 提出了一種新的方案----Flex 布局，可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局。目前，它已經(jīng)得到了所有瀏覽器的支持，這意味著，現(xiàn)在就能很安全地使用這項(xiàng)功能。

下面是一些彈性布局的基本語(yǔ)法：

兩部分：

1. 語(yǔ)法是添加到父容器上的
   
           display : flex;（彈性盒子的標(biāo)志哦！?。。?br />
           flex-direction: row; 布局的排列方向 （主軸排列方向）
   
                row 默認(rèn)值，顯示為行。方向?yàn)楫?dāng)前文檔水平流方向，默認(rèn)情況下是從左往右。
   
                row-reverse  顯示為行。但方向和row屬性值是反的
   
                column  顯示為列
   
                column-reverse 顯示為列。但方向和column屬性值是反的
   
           flex-wrap : nowrap; 是否進(jìn)行換行處理。
   
                nowrap; 默認(rèn)值，不換行處理
   
                wrap; 換行處理
   
                wrap-reverse; 反向換行
   
           flex-flow : flex-direction flex-wrap 復(fù)合寫(xiě)法 (是有順序的)。
   
           justify-content ; 屬性決定了主軸方向上子項(xiàng)的對(duì)齊和分布方式。  
   
               flex-start ： 子項(xiàng)都去起始位置對(duì)齊。
   
               flex-end ： 子項(xiàng)都去結(jié)束位置對(duì)齊。
   
               center ： 子項(xiàng)都去中心位置對(duì)齊。
   
               space-between : 表現(xiàn)為兩端對(duì)齊。多余的空白間距在元素中間區(qū)域分配，兩邊沒(méi)寬。 
   
               space-around : 邊緣兩側(cè)的空白只有中間空白寬度一半即每個(gè)塊都有左右間距。
   
               space-evenly :每個(gè)flex子項(xiàng)兩側(cè)空白間距完全相等。
   
           align-items : 每一行中的子元素上下對(duì)齊方式。
   
               stretch;默認(rèn)值，flex子項(xiàng)拉伸
   
               flex-start;容器頂部對(duì)齊
   
               center;容器居中對(duì)齊
   
               flex-end;容器底部對(duì)齊
   
           align-content : 跟justify-content相反的操作。側(cè)軸的對(duì)齊方式。(最少需要兩行才能看出效果，因?yàn)樗嵌嘈械囊粋€(gè)上下對(duì)齊方式)
   
               默認(rèn)：多行下，有幾行就會(huì)把容器劃分為幾部分，默認(rèn)就是stretch拉伸的。
   
               值跟justify-content取值是相同的。
   
   
   
2. 語(yǔ)法是添加到子容器上的？
   
           order : 排序(值越大越后)
   
               0：默認(rèn)值      eg:1234
   
               1：放在后面    eg:1342
   
               -2：放在前面   eg:2134
   
           flex-grow : 擴(kuò)展 ( 想看到擴(kuò)展的效果，必須有空隙 )
   
               0 : 默認(rèn)值 , 不去擴(kuò)展
   
               0.5：占空隙的一半
   
               1 : 去擴(kuò)展 , 會(huì)把空白區(qū)域全部沾滿
   
            （ 注：子元素會(huì)按照設(shè)置的比例值來(lái)分配空隙，如果比例值總和小于1，那么會(huì)有空隙，如果比例值總和大于等于1，那么就沒(méi)有空隙。）
   
           flex-shrink : 收縮
   
               正常默認(rèn)值是1
   
               0表示不收縮，.5收縮小一些，2收縮大一些。（大小是跟正?？s放1進(jìn)行比較的）
   
           flex-basis : 跟flex-shrink/flex-grow很像。
   
               flex-shrink/flex-grow是設(shè)置一個(gè)比例值，flex-basis是設(shè)置一個(gè)具體值。
   
           flex : 一種復(fù)合寫(xiě)法
   
               flex-grow  flex-shrink  flex-basis
   
               flex:1;
   
                   flex : 1 1 0    
   
               flex:0;
   
                   flex : 0 1 0
   
           algin-self: 跟align-items操作很像，區(qū)別就是只是針對(duì)某一個(gè)子項(xiàng)。
   
               
   
   
   
   注：默認(rèn)情況下，在彈性盒子中的子元素的左右排列的。
   
   注：
   
       水平是主軸的時(shí)候：默認(rèn)情況下，當(dāng)寬高不寫(xiě)的時(shí)候，寬度由內(nèi)容決定，高度由父容器決定。
   
       垂直是主軸的時(shí)候：默認(rèn)情況下，當(dāng)寬高不寫(xiě)的時(shí)候，寬度由父容器決定，高度由內(nèi)容決定。
   
   
   
   注：當(dāng)子項(xiàng)的總寬度大于父容器的時(shí)候，會(huì)自動(dòng)收縮的（彈性的優(yōu)先級(jí)是大于自身固定大小的）
   
   注：當(dāng)子項(xiàng)的內(nèi)容已經(jīng)達(dá)到了父容器最小寬高的時(shí)候，就會(huì)出現(xiàn)溢出的現(xiàn)象。
   
   
   
   注：彈性布局中用的頻率比較多的語(yǔ)法：
   
       display : flex;
   
       flex-direction;
   
       justify-content;
   
       align-items;
   
       flex;
   
   
   
   注：彈性布局的優(yōu)勢(shì)是做一維布局，網(wǎng)格布局的優(yōu)勢(shì)是做二維布局。
   
   
   
   下面是彈性布局骰子案例代碼：
   
   
   
   <!DOCTYPE html>
   
   <html lang="en">
   
   <head>
   
       <meta charset="UTF-8">
   
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
       <title>Document</title>
   
       <style>
   
           *{margin: 0;padding: 0;}
   
           ul{list-style: none;}
   
           a{text-decoration: none;}
   
           img{display: block;}
   
   
   
           .box1{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;justify-content: center;align-items: center;}
   
           .box1 div{width: 30px;height: 30px;border-radius:50%;background: black;}
   
   
   
           .box2{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;}
   
           .box2 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;}
   
           .box2 div:nth-of-type(1){align-self: flex-start;}
   
           .box2 div:nth-of-type(2){align-self: flex-end;}
   
   
   
           .box3{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;}
   
           .box3 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;}
   
           .box3 div:nth-of-type(1){align-self: flex-start;}
   
           .box3 div:nth-of-type(3){align-self: flex-end;}
   
   
   
           .box4{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}
   
           .box4 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
   
           .box4 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}
   
   
   
           .box5{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}
   
           .box5 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
   
           .box5 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}
   
   
   
           .box6{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}
   
           .box6 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
   
           .box6 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}
   
   
   
           #box{width: 400px;height: 400px;margin: 20px auto;border: 1px springgreen solid; 
   
           perspective: 500px;perspective-origin: right top;}
   
           #box .main{position: relative;width: 150px;height: 150px;margin: 125px;
   
           transform-style: preserve-3d;transition: 4s;transform-origin: center center -50px;}
   
           #box .main .box1{position: absolute;background:limegreen;left: 0;top: 0;
   
           width: 150px;height: 150px;}
   
           #box .main .box2{position: absolute;background:limegreen;left: 0;top: 0;
   
           width: 150px;height: 150px;left: 150px;transform-origin:left; transform:rotateY(90deg);}
   
           #box .main .box3{position: absolute;background:limegreen;left: 0;top: 0;
   
           width: 150px;height: 150px;left: -150px;transform-origin:right; transform:rotateY(-90deg);}
   
           #box .main .box4{position: absolute;background:limegreen;left: 0;top: 0;
   
           width: 150px;height: 150px;top: -150px;transform-origin:bottom; transform:rotateX(90deg);}
   
           #box .main .box5{position: absolute;background:limegreen;left: 0;top: 0;
   
           width: 150px;height: 150px;top: 150px;transform-origin:top; transform:rotateX(-90deg);}
   
           #box .main .box6{position: absolute;background:limegreen;left: 0;top: 0;
   
           width: 150px;height: 150px;transform:translateZ(-150px) rotateY(180deg);}
   
   
   
           #box:hover .main{transform:rotateY(360deg);}
   
       </style>
   
   </head>
   
   <body>
   
       <div id="box">
   
           <div class="main">
   
               <div class="box1">
   
                   <div></div>
   
               </div>
   
               <div class="box2">
   
                   <div></div>
   
                   <div></div>
   
               </div>
   
               <div class="box3">
   
                   <div></div>
   
                   <div></div>
   
                   <div></div>
   
               </div>
   
               <div class="box4">
   
                   <div>
   
                       <li></li>
   
                       <li></li>
   
                   </div>
   
                   <div>
   
                       <li></li>
   
                       <li></li>
   
                   </div>
   
               </div>
   
               <div class="box5">
   
                   <div>
   
                       <li></li>
   
                       <li></li>
   
                   </div>
   
                   <div>
   
                       <li></li>
   
                   </div>
   
                   <div>
   
                       <li></li>
   
                       <li></li>
   
                   </div>
   
               </div>
   
               <div class="box6">
   
                   <div>
   
                       <li></li>
   
                       <li></li>
   
                   </div>
   
                   <div>
   
                       <li></li>
   
                       <li></li>
   
                   </div>
   
                   <div>
   
                       <li></li>
   
                       <li></li>
   
                   </div>
   
               </div>
   
           </div>
   
       </div>
   
   </body>
   
   </html>