Создание изображения ссылки поворачивается на 90deg с помощью css

Question

Я делаю свои первые шаги, изучая код. Я занимаюсь некоторыми курсами в Интернете, и теперь я решил продолжить изучение опыта, когда я создаю тему Wordpres.

Дело в том, что я сделал 91 град «у» повернут изображение, которое превращается в 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" />

В общем, я хочу достичь всего этого, чтобы иметь 91-градусное повернутое изображение, когда я нажимаю на него, он превращается в 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>

Здесь у меня есть изображение с tranformation и со ссылкой на другую страницу , Это не работает, потому что есть конфликт между щелчком, чтобы он включался, и щелчок на ссылку на другую страницу.

Мне нужно сделать щелчок, чтобы сначала повернуть изображение, а затем, когда оно уже повернуто, сделайте щелчок, чтобы перейти к ссылке. Если я не хочу идти по ссылке, я могу закрыть изображение, снова щелкнув вне изображения.

У вас есть предложение?

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 использовал фокусное состояние изображения, чтобы повернуть его. Я переместил состояние фокусировки в общий родительский контейнер и сделал поведение изображения и ссылки по-разному основанным на состоянии фокусировки этого родителя. Поскольку якорь прозрачен и скрыт по умолчанию, он не доступен для кликов. Как только щелкает контейнер, изображение вращается до полной ширины. То же самое происходит с якорем. Кроме того, его видимость переключается на видимую, так что она фактически доступна для кликов. Так как положение родительского контейнера является относительным, оно используется как опорная точка для абсолютного позиционного якоря. Он идеально выровнен поверх изображения и, таким образом, имеет такую ​​же область с кликом.