リンクイメージをCSSを使って90度回転させる

Question

私は最初にコードを学習しています。私はインターネットでいくつかのコースを取ってきましたが、今はWordpresのテーマを構築している間にその経験から学び続けることに決めました。

img { 
 
    
 
    display: block; 
 
    margin: 20px; 
 
    width: 50%; 
 
    height: 50%; 
 
    transform: rotatey(91deg); 
 
} 
 

 
.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; 
 
    outline: 0; 
 
} 
 

 
.crossRotate:focus { 
 
    transform: rotatey(0deg); 
 
}

<img class="crossRotate" src="https://pixabay.com/static/uploads/photo/2015/03/29/01/54/tree-696839_960_720.jpg" tabindex="1" />

を：

の事は私が外にクリックしたとき、私はそれをクリックし、それが戻って91度に行くことができたときに91度「Y」は0℃になり、画像を回転させたことです

基本的には、このすべてで達成したいのは、91度回転した画像をクリックすると、0度に変わります。画像をもう一度クリックすると、別のページにリンクされます。画像の外側をクリックすると91度に戻ります。

私はいくつかの日前からこれをしようとしてきたし、この1つは私の最高のアプローチです：

ここ

img { 
 
    
 
    display: block; 
 
    margin: 20px; 
 
    width: 50%; 
 
    height: 50%; 
 
    transform: rotatey(91deg); 
 
} 
 

 
.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; 
 
    outline: 0; 
 
} 
 

 
.crossRotate:focus { 
 
    transform: rotatey(0deg); 
 
}

<a href="https://www.google.fr"> 
 
    
 
    <img class="crossRotate" src="http://www.colorcombos.com/images/colors/FF0000.png" tabindex="1" /> 
 

 
</a>

私は形質転換のと、別のページへのリンクとイメージを持っています。これは、クリックを切り替えるためのクリックと別のページへのリンクのクリックとの間に矛盾があるため機能しません。

私が必要とするのは、画像を最初に回すようにすることです。そして、それが既に回っているときに、リンクをクリックするようにします。私がリンクに行きたくない場合は、画像の外側をクリックして再度画像を閉じることができます。

いくつか提案がありますか？

Answer 1

私があなたに合ったら、2段階のボタンが必要です。最初のクリックでは画像が回転し、2回目のクリックでリンクが有効になります。これは、あなたがJavaScriptを使用する以外はややこしいことです。下のコードでは、あなたのトリックをtabindexで再利用しました。コンテナをフォーカス可能にし、イメージの回転とリンクの表示の両方にフォーカス状態を使用しました。回転に加えてアンカーの表示設定を使用したので、折りたたんだときにリンクをクリックできないようにしました。

.crossRotate { 
 
    display: inline-block; 
 
    position: relative; 
 
    outline: 0; 
 
} 
 

 
img { 
 
    
 
    display: block; 
 
    transform: rotatey(91deg); 
 
} 
 

 
.crossRotate img, .crossRotate a { 
 
    -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:focus img { 
 
    transform: rotatey(0deg); 
 
} 
 

 
.crossRotate a { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    visibility: hidden; 
 
    transform: rotatey(91deg); 
 
} 
 
.crossRotate:focus a, .corssRotate a:focus { 
 
    visibility: visible; 
 
    transform: rotatey(0deg); 
 
}

<label class="crossRotate" tabindex="1"> 
 
    <img src="https://pixabay.com/static/uploads/photo/2015/03/29/01/54/tree-696839_960_720.jpg" /> 
 
    <a href="http://stackoverflow.com"></a> 
 
</label>

説明：

アンカー要素は、基本的に唯一の長方形です。他の要素と同じ方法で、表示/非表示、回転ができます。 OPは、画像を回転させるために画像の焦点状態を使用した。フォーカス状態を共通の親コンテナに移動し、その親のフォーカス状態に基づいて、イメージとリンクの両方の動作を異ならせました。アンカーは透過的でデフォルトで隠されているため、クリックできません。コンテナがクリックされるとすぐに、画像はその全幅に回転します。同じことがアンカーで起こります。さらに、可視性は可視に切り替えられ、実際にクリック可能になります。親コンテナの位置は相対的なので、絶対配置されたアンカーの参照点として使用されます。画像の上に完全に配置されているため、同じクリック可能な領域があります。