css3中的旋轉有個需要注意的點

2021-08-26 12:30:42 字數 1592 閱讀 2039

一般來說,如果要將元素居中,可能會採取以下方式:

.box

如果,要旋轉的是個正方體,用這樣的方式把第乙個面固定在中間,

要對其進行旋轉,那麼此時旋轉的中心點就不在最中間。

如以下**:

css:

*

body

.cube

.cube

:hover

.cube>div>div

.cube>div

.f>div

.b>div

.u>div

.d>div

.l>div

.r>div

.f.b

.u.d

.l.r

@keyframes rubicscube

12.5%

25%37.5%

50%62.5%

75%87.5%

100%

}

html:

class="cube">

class="f">

1div>

2div>

3div>

4div>

5div>

6div>

7div>

8div>

9div>

div>

class="b">

1div>

2div>

3div>

4div>

5div>

6div>

7div>

8div>

9div>

div>

class="u">

1div>

2div>

3div>

4div>

5div>

6div>

7div>

8div>

9div>

div>

class="d">

1div>

2div>

3div>

4div>

5div>

6div>

7div>

8div>

9div>

div>

class="l">

1div>

2div>

3div>

4div>

5div>

6div>

7div>

8div>

9div>

div>

class="r">

1div>

2div>

3div>

4div>

5div>

6div>

7div>

8div>

9div>

div>

div>

這裡沒有給魔方按z軸旋轉,沒有給魔方設定旋轉中心,本來是想達到按y軸旋轉並按x軸上下翻的效果,但是魔方整體會左右飄。如果如果將旋轉中心設定如下就ok了:

transform-origin: 150px 150px 0px;

CSS3硬體加速需要注意的事項

webkit瀏覽器會把所有需要動畫的元素放到復合層中渲染,另外以下兩種情況也會使不需要動畫的元素也放到復合層中渲染,這樣會導致元素動畫不流暢 原則是需要的動畫才讓它在復合層中渲染 1,元素有乙個包含復合層的後代節點 元素有乙個在復合層中渲染的後代節點 換句話說,就是乙個元素擁有乙個子元素,該子元素在...

css中浮動需要注意的東西

1.css中的浮動 在css中為了讓元素移動到父元素的左邊或者右邊,我們可以對元素設定浮動float.2.float left right 浮動的選擇有兩種,一種是float left左浮動。還有一種是float right右浮動 3.如果對乙個元素設定了浮動,那麼這個元素就會脫離標準文件流,並且該...

css中的overflow需要注意的問題

html中經常會碰到內容超出乙個元素的顯示範圍。overflow就是用來控制超出內容的顯示方式。它有以下幾個可選項 visible為預設值,內容會全部顯示,但是會在元素框之外。hidden為隱藏超出的內容。auto為內容超出時自動出現滾動條,否則不顯示滾動條。scroll為始終顯示滾動條。css3中...