CSS3的旋轉屬性(transform: rotate())可以讓元素旋轉指定的角度,但這也包括了所有子元素,這有時候并不是我們所期望的。比如有一個塊級元素包含了若干個子元素,我們想讓這個塊級元素旋轉45度,但是卻發現子元素也隨之而旋轉了。那么有沒有方法讓子元素不隨父級元素旋轉呢?
.parent { transform: rotate(45deg); } .parent >* { transform: rotate(-45deg); }
我們可以使用CSS3的子元素選擇器(>)來選擇所有的“直接子元素”,并將它們的旋轉角度設置為與父級相反數。這樣子元素就不會隨著父級元素旋轉了。
在上述代碼中,“*”表示所有選擇器,而“>”表示“直接子元素”選擇器,所以“parent >*”表示所有直接子元素選擇器的父元素。我們在其中應用了一個逆向的旋轉轉換,以抵消與父級元素相對的旋轉轉換。
總之,使用子元素選擇器可以讓子元素不隨父級元素旋轉,這是一個非常有用的技巧,它可以幫助我們更自由地控制頁面布局和視覺效果。
上一篇css input用法
下一篇css3如何畫半橢圓