html - 在进行转换时 - rotateY，单词会反转

Question

我是 CSS3 的新手，为了学习它，我正在使用 CSS3d transform: rotateY 属性轻松地将按钮旋转 180 度 transition。但由于 180 翻转，单词显示为相反。可以做什么，以便按钮中的单词在旋转之前以完全相同的方式显示。到目前为止，我读到的是我需要自定义按钮的后部，但我不知道该怎么做。这是我的 Codepen 代码:http://codepen.io/vikrantnegi007/pen/QbozLq

HTML:

<div class="container">
  <div class="jumbotron">
    <h1>Let's have fun!</h1>
    <button id="btn1">btn1</button>
    <button id="btn2">btn2</button>
    <button id="btn3">btn3</button>
    <button id="btn4">btn4</button>
   </div><!-- /.jumbotron -->
</div>

CSS 代码:

@import url(https://fonts.googleapis.com/css?family=Cinzel);
.container {
  margin: 0 auto;
  width: 500px;
  background-color: rgba(35, 35, 35, 0.4);
  text-align: center;
  border-radius: 5px;
  border: 2px solid #000;
}

.jumbotron {
  font-family: "Cinzel";
  padding-bottom: 20px;
}

h1 {
  color: rgba(50, 50, 50);
}

button {
  height: 50px;
  width: 100px;
  cursor: pointer;
  text-transform: uppercase;
  background-color: rgba(65, 69, 67, 0.5);
  color: #fff;
  border: 1.5px solid #fff;
  border-radius: 5px 30px 5px 30px;
  box-shadow: 0px 2px 5px rgba(110, 110, 110, 0.4);
  margin-left: 5px;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

button:hover {
  background-color: rgba(180, 180, 180, 0.4);
  -webkit-transform: rotateY(180deg) scale(1.5);
  transform: rotateY(180deg) scale(1.5);
}

button:active {
  -webkit-transform: translate(1px, 1px) scale(0.9,0.9);
  transform: translate(1px, 1px) scale(0.9, 0.9);
 }

Answer 1

通常当你旋转一个元素时，背面会变成正面，反之亦然。由于您的背景颜色是半透明的，因此背面会显示出来。

避免文本反向显示的一种方法是将文本放在它自己的元素中(比如 <span> 标签)，然后应用反向 transform当按钮悬停时(如以下代码片段所示):

@import url(https://fonts.googleapis.com/css?family=Cinzel);
 .container {
  margin: 0 auto;
  width: 500px;
  background-color: rgba(35, 35, 35, 0.4);
  text-align: center;
  border-radius: 5px;
  border: 2px solid #000;
}
.jumbotron {
  font-family: "Cinzel";
  padding-bottom: 20px;
}
h1 {
  color: rgba(50, 50, 50);
}
button {
  height: 50px;
  width: 100px;
  cursor: pointer;
  text-transform: uppercase;
  background-color: rgba(65, 69, 67, 0.5);
  color: #fff;
  border: 1.5px solid #fff;
  border-radius: 5px 30px 5px 30px;
  box-shadow: 0px 2px 5px rgba(110, 110, 110, 0.4);
  margin-left: 5px;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}
button:hover {
  background-color: rgba(180, 180, 180, 0.4);
  transform: rotateY(180deg) scale(1.5);
}
button:active {
  transform: translate(1px, 1px);
  transform: scale(0.9, 0.9);
}
button > span {
  display: block;
  transition: all 1s ease;
}
button:hover > span {
  transform: rotateY(-180deg);
}

<div class="container">
  <div class="jumbotron">
    <h1>Let's have fun!</h1>
    <button id="btn1"><span>btn1</span></button>
    <button id="btn2"><span>btn1</span></button>
    <button id="btn3"><span>btn1</span></button>
    <button id="btn4"><span>btn1</span></button>
  </div>
  <!-- /.jumbotron -->
</div>

另一种方法是为元素创建背面，然后在悬停按钮时显示它(就像您提到的那样)。您可以在 my answer here 中找到一个示例.