在css3轉換中按下按鈕時Animate div標籤

我有一個div標籤和一個按鈕。我想要的是當我按下按鈕，然後我想要div標籤使用css3過渡動畫。當我按下按鈕時，我當前的代碼會旋轉按鈕，因爲我正在將變換應用於按鈕。我怎樣才能讓我的下面的代碼就像我想要的那樣工作？在css3轉換中按下按鈕時Animate div標籤

我的代碼是here

<button>Button</button> 
<div class="rotate"></div>

CSS樣式

.rotate { 
width: 100px; 
height: 100px; 
background: green; 
-webkit-transition: -webkit-transform 0.5s ease; 
} 

button:active { 
-webkit-transform: rotate(90deg); 
}

來源

2014-01-19 2619

您需要的js按鈕被點擊 – Naele

，當我需要爲這個CSS3純解一類添加到div.rotate。 – 2619

可以使用+爲選擇相鄰的兄弟姐妹

button:active + div.rotate { 
    transform:rotate(90deg); 
    -ms-transform:rotate(90deg); 
    -webkit-transform:rotate(90deg); 
}

FIDDLE

有關相鄰兄弟選擇訪問進一步細節here

來源

2014-01-19 12:40:53

我會怎麼做與前一個，讓'div.rotate'在按鈕之前？ – 2619

在這種情況下，你不能用純css –

它可以阻止它回到原來的位置嗎？現在，當我按下按鈕時，它會進行動畫處理，但是當我釋放按鈕時，div標記會移回原始位置。 – 2619

嘗試這種用途使用+如果它是一個相鄰兄弟

.rotate { 
width: 100px; 
height: 100px; 
background: green; 
-webkit-transition: -webkit-transform 0.5s ease; 
} 
    div 
    { 
webkit-transition: -webkit-transform 0.5s ease; 
    } 
button:active + div { 
-webkit-transform: rotate(90deg); 
    }

來源

2014-01-19 12:44:22

只要改變button:active到button:active + .rotate或button:active ~ .rotate

使用+如果它是一個相鄰的兄弟或~如果它進一步在DOM之下。

來源

2014-01-19 12:47:38 lalibi

更好的實現方法是使用更加永久的僞類來觸發更改，例如焦點。

而且，如果你想改變只用CSS堅持，對於這個黑客攻擊（即使有名;但現在我不記得了），即拍即回過渡巨大延遲

.rotate { 
    width: 100px; 
    height: 100px; 
    background: green; 
    -webkit-transition: -webkit-transform 9999s ease 9999s; 
} 

button:focus + div.rotate { 
     transform:rotate(90deg); 
    -ms-transform:rotate(90deg); 
    -webkit-transform:rotate(90deg); 
    -webkit-transition: -webkit-transform 0.5s ease; 

}

fiddle

來源

2014-01-19 20:36:51 vals

在css3轉換中按下按鈕時Animate div標籤

回答

相關問題