變換：縮放重置

Question

我在section上使用transform: rotate(-2deg);。當用戶將鼠標懸停在section上時，它會使用transform: scale(1.1);更改大小。

我的網站上有一個頁面，我想保持旋轉，但不是用戶懸停在該部分上時的比例。有沒有重置transform: scale(1.1);而不重置transform: rotate(-2deg);的方法？

下面是完整的代碼：

section { 
    display: block; 
    width: 100px; 
    height: 100px; 
    padding: 10px; 
    background: red; 
    /* Rotate */ 
    -webkit-transform: rotate(-2deg); 
    -moz-transform: rotate(-2deg); 
    -ms-transform: rotate(-2deg); 
    -o-transform: rotate(-2deg); 
    transform: rotate(-2deg); 
    /* Easing */ 
    -webkit-transition: -webkit-transform .2s ease-in-out; 
    -moz-transition: -moz-transform .2s ease-in-out; 
    -o-transition: -o-transform .2s ease-in-out; 
    transition: transform .2s ease-in-out; 
} 
section:hover { 
    -webkit-transform: scale(1.1); 
    -moz-transform: scale(1.1); 
    -ms-transform: scale(1.1); 
    -o-transform: scale(1.1); 
    transform: scale(1.1); 
} 
.some-page section:hover { 
    -webkit-transform: none; 
    -moz-transform: none; 
    -ms-transform: none; 
    -o-transform: none; 
    transform: none; 
} 

小提琴here。

Answer 1

你可以只設置原始transform值再次對hover選擇類似如下：

.some-page section:hover { 
    -webkit-transform: rotate(-2deg); 
    -moz-transform: rotate(-2deg); 
    -ms-transform: rotate(-2deg); 
    -o-transform: rotate(-2deg); 
    transform: rotate(-2deg); 
} 

這將確保該旋轉保持在-2度，但規模不會發生，因爲這個選擇更具體，並會優先於其他通用hover選擇器。

section { 
 
    display: block; 
 
    width: 100px; 
 
    height: 100px; 
 
    padding: 10px; 
 
    background: red; 
 
    /* Rotate */ 
 
    -webkit-transform: rotate(-2deg); 
 
    -moz-transform: rotate(-2deg); 
 
    -ms-transform: rotate(-2deg); 
 
    -o-transform: rotate(-2deg); 
 
    transform: rotate(-2deg); 
 
    /* Easing */ 
 
    -webkit-transition: -webkit-transform .2s ease-in-out; 
 
    -moz-transition: -moz-transform .2s ease-in-out; 
 
    -o-transition: -o-transform .2s ease-in-out; 
 
    transition: transform .2s ease-in-out; 
 
} 
 
section:hover { 
 
    -webkit-transform: scale(1.1); 
 
    -moz-transform: scale(1.1); 
 
    -ms-transform: scale(1.1); 
 
    -o-transform: scale(1.1); 
 
    transform: scale(1.1); 
 
} 
 
.some-page section:hover { 
 
    -webkit-transform: rotate(-2deg); 
 
    -moz-transform: rotate(-2deg); 
 
    -ms-transform: rotate(-2deg); 
 
    -o-transform: rotate(-2deg); 
 
    transform: rotate(-2deg); 
 
} 
 

 
/* Just for demo */ 
 

 
section { 
 
    margin: 10px; 
 
}

<section>I'm some content</section> 
 
<div class="some-page"> 
 
    <section>I'm some content</section> 
 
</div>