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（如在下面的代码段中：

＆＃13;

@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);
}

＆＃13;

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

＆＃13;

另一种方法是为元素创建背面，然后在按钮被悬停时显示（就像您之前提到的那样）。您可以在my answer here中找到相关的示例。

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

1 个答案: