html - 无法让文本正确旋转

Question

我正在为我的网站创建社交媒体 float 图标，目前它工作正常，但我无法以正确的方式获取文本。请帮我解决这个问题，如果您有任何更好的方法来最小化代码。这是 Codepen 中的构建。

* {
  box-sizing: border-box;
}

body {
  background: black;
}

.fa {
  font-size: 48px;
  color: white;
}

.share {
  position: fixed;
  right: 0;
  top: 50%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.share li {
  position: relative;
  text-align: center;
  align-content: center;
  vertical-align: center;
}

.share li:nth-of-type(1) .social-link,
.share li:nth-of-type(1) .social-link:hover {
  background: #188ef4;
}

.share li:nth-of-type(1) .nav-label {
  -moz-transition: background 0.4s ease, -moz-transform 0.4s ease 0.1s;
  -o-transition: background 0.4s ease, -o-transform 0.4s ease 0.1s;
  -webkit-transition: background 0.4s ease, -webkit-transform 0.4s ease;
  -webkit-transition-delay: 0s, 0.1s;
  transition: background 0.4s ease, transform 0.4s ease 0.1s;
  background: #188ef4;
}

.share li:nth-of-type(1) .social-link:hover .nav-label {
  -moz-transition: -moz-transform 0.4s ease, background 0.4s ease 0.1s;
  -o-transition: -o-transform 0.4s ease, background 0.4s ease 0.1s;
  -webkit-transition: -webkit-transform 0.4s ease, background 0.4s ease;
  -webkit-transition-delay: 0s, 0.1s;
  transition: transform 0.4s ease, background 0.4s ease 0.1s;
  background: #188ef4;
}

.share li:nth-of-type(2) .social-link,
.share li:nth-of-type(2) .social-link:hover {
  background: #db3236;
}

.share li:nth-of-type(2) .nav-label {
  -moz-transition: background 0.4s ease, -moz-transform 0.4s ease 0.1s;
  -o-transition: background 0.4s ease, -o-transform 0.4s ease 0.1s;
  -webkit-transition: background 0.4s ease, -webkit-transform 0.4s ease;
  -webkit-transition-delay: 0s, 0.1s;
  transition: background 0.4s ease, transform 0.4s ease 0.1s;
  background: #db3236;
}

.share li:nth-of-type(2) .social-link:hover .nav-label {
  -moz-transition: -moz-transform 0.4s ease, background 0.4s ease 0.1s;
  -o-transition: -o-transform 0.4s ease, background 0.4s ease 0.1s;
  -webkit-transition: -webkit-transform 0.4s ease, background 0.4s ease;
  -webkit-transition-delay: 0s, 0.1s;
  transition: transform 0.4s ease, background 0.4s ease 0.1s;
  background: #db3236;
}

.share li:nth-of-type(3) .social-link,
.share li:nth-of-type(3) .social-link:hover {
  background: #3B5998;
}

.share li:nth-of-type(3) .nav-label {
  -moz-transition: background 0.4s ease, -moz-transform 0.4s ease 0.1s;
  -o-transition: background 0.4s ease, -o-transform 0.4s ease 0.1s;
  -webkit-transition: background 0.4s ease, -webkit-transform 0.4s ease;
  -webkit-transition-delay: 0s, 0.1s;
  transition: background 0.4s ease, transform 0.4s ease 0.1s;
  background: #3B5998;
}

.share li:nth-of-type(3) .social-link:hover .nav-label {
  -moz-transition: -moz-transform 0.4s ease, background 0.4s ease 0.1s;
  -o-transition: -o-transform 0.4s ease, background 0.4s ease 0.1s;
  -webkit-transition: -webkit-transform 0.4s ease, background 0.4s ease;
  -webkit-transition-delay: 0s, 0.1s;
  transition: transform 0.4s ease, background 0.4s ease 0.1s;
  background: #3B5998;
}

.share li:nth-of-type(4) .social-link,
.share li:nth-of-type(4) .social-link:hover {
  background: #c41200;
}

.share li:nth-of-type(4) .nav-label {
  -moz-transition: background 0.4s ease, -moz-transform 0.4s ease 0.1s;
  -o-transition: background 0.4s ease, -o-transform 0.4s ease 0.1s;
  -webkit-transition: background 0.4s ease, -webkit-transform 0.4s ease;
  -webkit-transition-delay: 0s, 0.1s;
  transition: background 0.4s ease, transform 0.4s ease 0.1s;
  background: #c41200;
}

.share li:nth-of-type(4) .social-link:hover .nav-label {
  -moz-transition: -moz-transform 0.4s ease, background 0.4s ease 0.1s;
  -o-transition: -o-transform 0.4s ease, background 0.4s ease 0.1s;
  -webkit-transition: -webkit-transform 0.4s ease, background 0.4s ease;
  -webkit-transition-delay: 0s, 0.1s;
  transition: transform 0.4s ease, background 0.4s ease 0.1s;
  background: #c41200;
}

.share li:nth-of-type(5) .social-link,
.share li:nth-of-type(5) .social-link:hover {
  background: #ffc838;
}

.share li:nth-of-type(5) .nav-label {
  -moz-transition: background 0.4s ease, -moz-transform 0.4s ease 0.1s;
  -o-transition: background 0.4s ease, -o-transform 0.4s ease 0.1s;
  -webkit-transition: background 0.4s ease, -webkit-transform 0.4s ease;
  -webkit-transition-delay: 0s, 0.1s;
  transition: background 0.4s ease, transform 0.4s ease 0.1s;
  background: #ffc838;
}

.share li:nth-of-type(5) .social-link:hover .nav-label {
  -moz-transition: -moz-transform 0.4s ease, background 0.4s ease 0.1s;
  -o-transition: -o-transform 0.4s ease, background 0.4s ease 0.1s;
  -webkit-transition: -webkit-transform 0.4s ease, background 0.4s ease;
  -webkit-transition-delay: 0s, 0.1s;
  transition: transform 0.4s ease, background 0.4s ease 0.1s;
  background: #ffc838;
}

.share li .social-link {
  padding: 0;
  display: block;
  cursor: pointer;
  width: 60px;
  height: 60px;
  padding: 15px 20px;
}

.share li .social-link .nav-label {
  font-family: sans-serif;
  font-size: 14px;
  color: white;
  display: block;
  height: 60px;
  position: absolute;
  top: 0px;
  top: 0rem;
  line-height: 64px;
  padding: 0 20px;
  white-space: nowrap;
  z-index: 4;
  -moz-transition: -moz-transform 0.4s ease;
  -o-transition: -o-transform 0.4s ease;
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  -moz-transform-origin: left 50%;
  -ms-transform-origin: left 50%;
  -webkit-transform-origin: left 50%;
  transform-origin: left 50%;
  -moz-transform: rotateY(90deg);
  -webkit-transform: rotateY(90deg);
  transform: rotateY(90deg);
}

.share li .social-link .nav-label span {
  -moz-transform-origin: left 50%;
  -ms-transform-origin: left 50%;
  -webkit-transform-origin: left 50%;
  transform-origin: left 50%;
  -moz-transform: rotateY(270deg);
  -webkit-transform: rotateY(270deg);
  transform: rotateY(270deg);
}

.share li .social-link:hover .nav-label {
  -moz-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.share li .social-link:hover .nav-label span {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}

<html lang="en">

<head>
  <meta charset="utf-8">

  <title>Social Media Buildout</title>
  <meta name="description" content="Social Media testing">
  <meta name="author" content="Dev Patel">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="social-media.css">

  <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
  <![endif]-->

</head>

<body>
  <ul class="share">
    <!--Facebook-->
    <li>
      <a href="request-an-appointment.html">
        <div class="social-link">
          <i class="fa fa-calendar"></i>
          <div class="nav-label">
            <span>Request An Appointment</span>
          </div>
        </div>
      </a>
    </li>
    <!--Google-->
    <li>
      <a href="#">
        <div class="social-link">
          <i class="fa fa-google-plus"></i>
          <div class="nav-label">
            <span>Review Us</span>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div class="social-link">
          <i class="fa fa-facebook"></i>
          <div class="nav-label">
            <span>Like Our Page</span>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div class="social-link">
          <i class="fa fa-yelp"></i>
          <div class="nav-label">
            <span>Review Us</span>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div class="social-link">
          <i class="fa fa-instagram"></i>
          <div class="nav-label">
            <span>Check Our Posts</span>
          </div>
        </div>
      </a>
    </li>
  </ul>
</body>

</html>

Answer 1

您需要像这样更正 .share li .social-link .nav-label span 的 CSS:

.share li .social-link .nav-label span {
  transform-origin: center;
  transform: rotateY(180deg);
  display: inline-block;
}

完整代码:

* {
  box-sizing: border-box;
}

body {
  background: black;
}

.fa {
  font-size: 48px;
  color: white;
}

.share {
  position: fixed;
  right: 0;
  top: 50%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
}

.share li {
  position: relative;
  text-align: center;
  align-content: center;
  vertical-align: center;
}

.share li:nth-of-type(1) .social-link,
.share li:nth-of-type(1) .social-link:hover {
  background: #188ef4;
}

.share li:nth-of-type(1) .nav-label {
  transition: background 0.4s ease, transform 0.4s ease 0.1s;
  background: #188ef4;
}

.share li:nth-of-type(1) .social-link:hover .nav-label {
  transition: transform 0.4s ease, background 0.4s ease 0.1s;
  background: #188ef4;
}

.share li:nth-of-type(2) .social-link,
.share li:nth-of-type(2) .social-link:hover {
  background: #db3236;
}

.share li:nth-of-type(2) .nav-label {
  transition: background 0.4s ease, transform 0.4s ease 0.1s;
  background: #db3236;
}

.share li:nth-of-type(2) .social-link:hover .nav-label {
  transition: transform 0.4s ease, background 0.4s ease 0.1s;
  background: #db3236;
}

.share li:nth-of-type(3) .social-link,
.share li:nth-of-type(3) .social-link:hover {
  background: #3B5998;
}

.share li:nth-of-type(3) .nav-label {
  transition: background 0.4s ease, transform 0.4s ease 0.1s;
  background: #3B5998;
}

.share li:nth-of-type(3) .social-link:hover .nav-label {
  transition: transform 0.4s ease, background 0.4s ease 0.1s;
  background: #3B5998;
}

.share li:nth-of-type(4) .social-link,
.share li:nth-of-type(4) .social-link:hover {
  background: #c41200;
}

.share li:nth-of-type(4) .nav-label {
  transition: background 0.4s ease, transform 0.4s ease 0.1s;
  background: #c41200;
}

.share li:nth-of-type(4) .social-link:hover .nav-label {
  transition: transform 0.4s ease, background 0.4s ease 0.1s;
  background: #c41200;
}

.share li:nth-of-type(5) .social-link,
.share li:nth-of-type(5) .social-link:hover {
  background: #ffc838;
}

.share li:nth-of-type(5) .nav-label {
  transition: background 0.4s ease, transform 0.4s ease 0.1s;
  background: #ffc838;
}

.share li:nth-of-type(5) .social-link:hover .nav-label {
  transition: transform 0.4s ease, background 0.4s ease 0.1s;
  background: #ffc838;
}

.share li .social-link {
  padding: 0;
  display: block;
  cursor: pointer;
  width: 60px;
  height: 60px;
  padding: 15px 20px;
}

.share li .social-link .nav-label {
  font-family: sans-serif;
  font-size: 14px;
  color: white;
  display: block;
  height: 60px;
  position: absolute;
  top: 0px;
  top: 0rem;
  line-height: 64px;
  padding: 0 20px;
  white-space: nowrap;
  z-index: 4;
  transition: transform 0.4s ease;
  transform-origin: left 50%;
  transform: rotateY(90deg);
}

.share li .social-link .nav-label span {
  transform-origin: center;
  transform: rotateY(180deg);
  display: inline-block;
}

.share li .social-link:hover .nav-label {
  transform: rotateY(180deg);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
  <ul class="share">
    <!--Facebook-->
    <li>
      <a href="request-an-appointment.html">
        <div class="social-link">
          <i class="fa fa-calendar"></i>
          <div class="nav-label">
            <span>Request An Appointment</span>
          </div>
        </div>
      </a>
    </li>
    <!--Google-->
    <li>
      <a href="#">
        <div class="social-link">
          <i class="fa fa-google-plus"></i>
          <div class="nav-label">
            <span>Review Us</span>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div class="social-link">
          <i class="fa fa-facebook"></i>
          <div class="nav-label">
            <span>Like Our Page</span>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div class="social-link">
          <i class="fa fa-yelp"></i>
          <div class="nav-label">
            <span>Review Us</span>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div class="social-link">
          <i class="fa fa-instagram"></i>
          <div class="nav-label">
            <span>Check Our Posts</span>
          </div>
        </div>
      </a>
    </li>
  </ul>