正方體旋轉demo

2022-07-13 08:27:13 字數 2182 閱讀 7010

乙個正方體有6個面,我們把乙個正方體平鋪開來就是乙個十字的形狀,然後變換每一面的角度把正方體「摺疊」起來!

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

meta

name

="viewport"

content

="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"

>

<

title

>cube

title

>

<

style

type

="text/css"

>*li

.cube

.cube li

.cube li:nth-of-type(1)

.cube li:nth-of-type(2)

.cube li:nth-of-type(3)

.cube li:nth-of-type(4)

.cube li:nth-of-type(5)

.cube li:nth-of-type(6)

style

>

head

>

<

body

>

<

div

class

>

<

ul class

="cube"

>

<

li>1

li>

<

li>2

li>

<

li>3

li>

<

li>4

li>

<

li>5

li>

<

li>6

li>

ul>

div>

body

>

html

>

也可以把另外兩個側面去掉,只留4個面。

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

meta

name

="viewport"

content

="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"

>

<

title

>cube2

title

>

<

style

type

="text/css"

>*li

.cube

.cube li

.cube li:nth-of-type(1)

.cube li:nth-of-type(2)

.cube li:nth-of-type(3)

.cube li:nth-of-type(4)

style

>

head

>

<

body

>

<

div

class

>

<

ul class

="cube"

>

<

li>1

li>

<

li>2

li>

<

li>3

li>

<

li>4

li>

ul>

div>

body

>

html

>

用html標籤 css寫出旋轉的正方體

有一段時間沒寫 了,剛寫有點手生,無從下手,為了能快速進入狀態,就寫了這乙個小東西,純用標籤和樣式表寫。下面看一下我寫的。這一段是樣式表 style ul,li ulul hover lili nth child 1 li nth child 2 li nth child 3 li nth chil...

折正方體 給你出道題

乙個正方體盒子,把它展開成平面,有多少種展開方法?給定乙個平面 由若干個小正方形組成 問這個平面能否折成正方體?下面給出更清晰的定義 給定乙個6 6的方格圖,每個方格標識0,1表示是否選擇這個方格,問選中的這些方格能否折成正方形?一開始,我是這麼想的 給最上最左的小方格標上 上 從這個小方格按照上表...

CSS3 製作正方體

變形屬性 2d變形屬性 transform 他是css3中的變形屬性 通過transform 變形 來實現2d 或者3d 轉換,其中2d 有,縮放 scale x,y 移動 translate x,y 旋轉 rotate deg 傾斜 skew deg,deg 矩陣matrix 3d就是在2d基礎上...