トランスフォーム：回転だけでなく、平行移動もする

私はCSSのトランジションとトランスフォーメーションを学んでいます。ここではHTMLです：トランスフォーム：回転だけでなく、平行移動もする

<!DOCTYPE html> 
<html> 
<head> 
    <title> Transformatons and Transitions</title> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="css/n.css"> 
</head> 
<body> 
    <div class="animate">animate</div> 
    <div class="animate">animate2</div> 
    <div class="different">different1</div> 
    <div class="different">different2</div> 
</body> 
</html>

とCSSは次のとおりです。回転が正常に動作していない

div.different { 
    transform: translate(1000px,400px); 
    border-style: solid; 
    padding: 25px; 
    background-color: yellow; 
    display: block; 
    width: 125px; 
    transition:1s ease-in-out; 
} 
div.different:hover{ 
    background-color: red; 
    -webkit-transform: rotate(300deg);  
}

。要素が回転するのではなく、元の場所に戻っています。（1000px、400px）に滞在する代わりに、要素は（0px、0px）に戻る移動を防ぐにはどうすればよいですか？

出典

2016-06-27 stick

あなたが元の位置または新規の位置から回転しようとしていますか？ – theblindprophet

補足すると、div.differentを使用しないことをお勧めします。セレクタに.differentを使用するだけでなく、ブラウザが理解して適用するためにより便利で速くなります。明日、divとは異なるタグでこのクラスを使用する必要があるケースがあります。 – Ricky

あなたはブラウザがホバーがtranslate(0,0) rotate(300deg)として変換解釈するので、あまりにもhoverにtranslateを使用する必要があります。

div.different { 
    -webkit-transform: translate(1000px, 400px); 
     -ms-transform: translate(1000px, 400px); 
      transform: translate(1000px, 400px); 
    border-style: solid; 
    padding: 25px; 
    background-color: yellow; 
    display: block; 
    width: 125px; 
    transition: 1s ease-in-out; 
} 
div.different:hover { 
    background-color: red; 
    -webkit-transform: translate(1000px, 400px) rotate(300deg); 
     -ms-transform: translate(1000px, 400px) rotate(300deg); 
      transform: translate(1000px, 400px) rotate(300deg); 
}

出典

2016-06-27 16:39:05 makshh

私は、トランスフォームをもう一度定義してトランスフォームのCSSプロパティをオーバーライドするので、これが起こると説明することをお勧めします。そのため、彼は両方を指定する必要があります。 – Ricky

うん、ちょうど編集されました。 – makshh

は、同じ文の中で両方の変換を定義し、それに応じて変更します。

div.different { 
    transform: rotate(0deg) translate(1000px,400px); 
    border-style: solid; 
    padding: 25px; 
    background-color: yellow; 
    display: block; 
    width: 125px; 
    transition:1s ease-in-out; 
} 
div.different:hover{ 
    background-color: red; 
    -webkit-transform: rotate(300deg) translate(1000px,400px); 
}

フィドル：https://jsfiddle.net/quvLtwjt/1/

以前のトランスフォームを上書きしていました。

しかしあなたは現在の位置ではなく、古い位置からdivを回転させたい場合は、あなたが新しい位置を再定義し、同じ文の中で両方の変換を置くためにtransform-originを使用する必要があります。

div.different { 
    transform: rotate(0deg) translate(1000px,400px); 
    border-style: solid; 
    padding: 25px; 
    background-color: yellow; 
    display: block; 
    width: 125px; 
    transition:1s ease-in-out; 
    transform-origin: 1000px 400px; 
} 
div.different:hover{ 
    background-color: red; 
    -webkit-transform: rotate(300deg) translate(1000px,400px); 
}

フィドル：https://jsfiddle.net/quvLtwjt/

出典

2016-06-27 16:46:38 theblindprophet

トランスフォーム：回転だけでなく、平行移動もする

答えて

関連する問題