html - 如何使用 HTML 和 CSS 将垂直图像显示为水平方式？

Question

我在屏幕右边缘显示了一张小图片。实际上该图像是垂直的，但我想水平显示它。我应该如何使用 HTML 和 CSS 实现这一点？

供您引用，以下是页面的屏幕截图，其中包含右下角的垂直“联系人”图像。

有人可以帮我吗？以下是我为其当前的垂直位置尝试的代码:HTML 代码:

<div id="new_button_1">
        <a href="#" >
          <img src="http://www.yourdomain.com/contact.jpeg" alt="" pagespeed_url_hash="3893298907" border="0" align="middle" height="89" width="33">
        </a>
    </div>

CSS 代码:

#new_button_1 {
  width: 33px;
  position: fixed;
  right: 0;
  top: 85%;
  cursor: pointer;
  z-index: 7;
}

Answer 1

没有理由为如此简单的按钮使用图像。

让我们用简单的 CSS 创建它:

默认情况下，当然是不旋转的。你可以旋转它:

transform: rotate(-90deg)

并且您可以使用相同的 CSS 和 transform-origin: 100% 100% 将其固定到当前位置使用视口(viewport)。

进一步阅读 MDN

• transform property

• transform-origin property

工作示例

a {
  background: #FCD033;
  text-decoration: none;
  color: #000;
  font-family: sans-serif;
  padding: 5px 10px;
}
.rotate {
  transform: rotate(-90deg);
  display: inline-block;
}
.fixed {
  position: fixed;
  right: 0;
  top: 80%;
  cursor: pointer;
  z-index: 7;
  transform: rotate(-90deg);
  transform-origin: 100% 100%; 
  /*x-offset y-offset = (right hand side and bottom to line up with viewport edge)*/
}

<h2>Not Rotated</h2>
<a href="#">Contact</a>

<h2>Rotated</h2>
<a href="#" class="rotate">Contact</a>

<h2>Fixed (bottom right)</h2>
<a href="#" class="fixed">Contact</a>