使用css製作鏈接圖像旋轉90度使用css

Question

我正在學習編碼的第一步。我一直在互聯網上學習一些課程，現在我決定在建立Wordpres主題的同時繼續學習經驗。

的事情是，我做了一個91度的「Y」旋轉圖像，輪流到0度，當我點擊它，然後它可以回到91度，當我點擊以外：

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" />

基本上我想要實現所有這一切都是有一個91deg旋轉的圖像，當我點擊它，它變成0deg，然後如果我再次點擊圖像，它會將我鏈接到另一個頁面，並且如果我點擊圖像外部，它會再次變成91度。

我一直想這一點，因爲前幾天，這一個是我的最好的方法：

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

如果我找到了你，你想要一個兩階段按鈕。在第一次點擊圖像旋轉到視圖中，第二次點擊它應該激活鏈接。除非您使用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使用圖像的焦點狀態來旋轉它。我已將焦點狀態移至共同的父容器，並且基於父級的焦點狀態使圖像和鏈接的行爲不同。由於錨點是透明的並且默認隱藏，因此它不可點擊。點擊容器後，圖像旋轉至其全部寬度。錨點也是如此。此外，它的可視性切換到可見，所以它實際上是可點擊的。由於父容器的位置是相對的，因此它被用作絕對定位錨點的參考點。它在圖像頂部完美對齊，因此具有相同的可點擊區域。