html - 使用css使链接图像旋转90度

Question

我正在迈出学习编码的第一步。我一直在网上学习一些类(class)，现在我决定在构建 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" />

基本上我想通过所有这些实现的是拥有一个 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);
}

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

</a>

这里我有一张图片，其中包含一个转换和指向另一个页面的链接。它不起作用，因为点击使其转向和点击链接到另一个页面之间存在冲突。

我需要的是先点击打开图片，然后当它已经打开时点击转到链接。如果我不想转到链接，我可以在图像外部单击再次关闭图像。

你有什么建议吗？

Answer 1

如果我没看错，您需要一个两相按钮。第一次点击图像旋转进入 View ，第二次点击它应该激活一个链接。这相当棘手，除非您使用 JavaScript。在下面的代码中，我用 tabindex 重新使用了你的技巧。我制作了一个可聚焦的容器，并将其聚焦状态用于图像的旋转和链接的显示。除了旋转之外，我还使用了 anchor 可见性设置，以便链接在折叠时不可点击。

.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>

解释:

anchor 元素基本上只是一个矩形。您可以像处理任何其他元素一样隐藏/显示和旋转它。 OP 使用图像的焦点状态来旋转它。我已将焦点状态移至公共(public)父容器，并根据该父容器的焦点状态使图像和链接的行为有所不同。由于 anchor 是透明的并且默认情况下是隐藏的，因此不可点击。单击容器后，图像将旋转到其全宽。 anchor 也是如此。此外，它的可见性被切换为可见，因此它实际上是可点击的。由于父容器的位置是相对的，它被用作绝对定位 anchor 的引用点。它与图像顶部完美对齐，因此具有相同的可点击区域。