我正在學習編碼的第一步。我一直在互聯網上學習一些課程,現在我決定在建立Wordpres主題的同時繼續學習經驗。使用css製作鏈接圖像旋轉90度使用css
的事情是,我做了一個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>
在這裏我有一個改造的探討,並鏈接到其他網頁的圖片。它不起作用,因爲點擊使其翻轉和點擊鏈接到另一個頁面之間存在衝突。
我需要的是點擊打開圖像第一,然後當它已經轉動使點擊進入鏈接。如果我不想去鏈接,我可以再次關閉圖像在圖像外部單擊。
你有什麼建議嗎?
您需要爲「點擊」使用javascript。 –
你有參考,我可以看到學習如何做到這一點? –
大量的教程在互聯網上。 –