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

Question

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

供您参考以下是包含垂直＆＃34;联系人＆＃34;的页面的屏幕截图。右边底部的图像。

有人可以帮助我吗？ 以下是我为其目前的垂直位置尝试的代码： 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%将其固定到当前相同的位置，以便在右侧和底部进行旋转，并与视口对齐。

进一步阅读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>

Answer 2

您可以使用CSS3旋转

transform: rotate(90deg);