web-dev-qa-db-ja.com

純粋なCSSを使用したクリック時のCSS3遷移

画像（プラス記号）を45度回転させて十字記号を作成しようとしています。これまでのところ、以下のコードを使用してこれを達成することができましたが、ホバーで動作しており、クリック時に回転させたいと思っていました。

そうする簡単な方法はありますかsing CSS？

私のコードは：

CSS

img {
    display: block;
    margin: 20px;
}

.crossRotate {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
     transition-duration: 1s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
     transition-property: transform;
}

.crossRotate:hover {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
     transform: rotate(45deg);
}

HTML

<body>
   <img class="crossRotate" src="images/cross.png" alt="Cross Menu button" />
</body>

jsfiddle デモがあります。

csscss3rotationcss-transitionstransition
34
user2498890

CSSのみのソリューションが必要な場合は、 active を使用できます

.crossRotate:active {
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
}

ただし、アクティビティが移動しても変換は持続しません。そのためには、javascriptが必要です（jquery click および css が最もクリーンなIMOです）。

$( ".crossRotate" ).click(function() {
    if (  $( this ).css( "transform" ) == 'none' ){
        $(this).css("transform","rotate(45deg)");
    } else {
        $(this).css("transform","" );
    }
});

フィドル

32
jeremyjjbrown

方法＃1：CSS :focus擬似クラス

純粋なCSSソリューションとして、画像に tabindex 属性を使用し、次のように :focus 疑似クラスを使用することで、一種の効果を実現できます。

<img class="crossRotate" src="http://placehold.it/100" tabindex="1" />

.crossRotate {
    outline: 0;
    /* other styles... */
}

.crossRotate:focus {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

WORKING DEMO.

注：このアプローチを使用すると、画像はonclick（フォーカス）で回転します。回転を無効にするには、画像のどこかをクリックする必要があります（ぼやけ）。

方法＃2：非表示の入力と:checked疑似クラス

これは私のお気に入りの方法の1つです。このアプローチでは、非表示のチェックボックス入力と、画像をラップする<label>要素があります。

画像をクリックすると、ラベルにfor属性が使用されるため、非表示の入力がチェックされます。

したがって、 :checked 擬似クラスおよび 隣接する兄弟セレクター+を使用することにより、画像を回転させることができます。

<input type="checkbox" id="hacky-input">

<label for="hacky-input">
  <img class="crossRotate" src="http://placehold.it/100">
</label>

#hacky-input {
  display: none; /* Hide the input */
}

#hacky-input:checked + label img.crossRotate {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

WORKING DEMO＃1。

WORKING DEMO＃2（ラベルにrotateを適用すると、より良いエクスペリエンスが得られます）。

方法＃3：JavaScriptを介してクラスを切り替える

JavaScript/jQueryの使用がオプションの場合、次のように .toggleClass() で.activeクラスを切り替えて、回転効果をトリガーできます。

$('.crossRotate').on('click', function(){
    $(this).toggleClass('active');
});

.crossRotate.active {
    /* vendor-prefixes here... */
    transform: rotate(45deg);
}

WORKING DEMO.

28
Hashem Qolami

：target擬似クラスを使用して、さまざまなDOM要素に影響を与えることもできます。要素がアンカーターゲットの宛先である場合、：target疑似要素を取得します。

<style>
p { color:black; }
p:target { color:red; }
</style>

<a href="#elem">Click me</a>
<p id="elem">And I will change</p>

ここにフィドルがあります： https://jsfiddle.net/k86b81jv/

2
Dario Corno

出来上がり！

div {
  background-color: red;
  color: white;
  font-weight: bold;
  width: 48px;
  height: 48px;  
  transform: rotate(360deg);
  transition: transform 0.5s;
}

div:active {
  transform: rotate(0deg);
  transition:  0s;
}
<div></div>
2
kaheglar

Jeremyjjbrowが言ったように、:active pseudoは持続しません。しかし、純粋なCSSでそれを行うためのハックがあります。次のように、<a>タグでラップし、:activeを適用できます。

<a class="test">
    <img class="crossRotate" src="images/cross.png" alt="Cross Menu button" />
 </a>

そして、CSS：

.test:active .crossRotate {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    }

試してみてください...（少なくともChromeでは）動作します！

1
LcSalazar