一般來說,如果要將元素居中,可能會採取以下方式:
.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中...