css text flip в кнопке

Question

Практикуюсь и не могу сделать нормально эффект flip для текста при наведении. Цель: Сделать как бы переворачивание текста, как будто грани куба крутятся.

Сделал, но как-то неправильно крутит текст tranlate, он при таком построении текст не убирает вниз, а отводит вниз и возвращает почему-то.

$(function () {
 $('.flipper').on('mouseover', function (){
   $(this).children('h1').toggleClass('rotate');
 }).on('mouseleave', function () {
   $(this).children('h1').toggleClass('rotate');
 });
});

* {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: #FFDEE9;
  background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%);
}

.main {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flipper{
  border: 1px solid rgb(135, 135, 135);
  border-radius: 10px;
  position: relative;
  width: 300px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.flip2, .flip1{
  position: absolute;
}
h1 {
  font-size: 70px;
  -webkit-transform: rotateX(0deg) translateY(0px);
  -moz-transform: rotateX(0deg) translateY(0px);
  -o-transform: rotateX(0deg) translateY(0px);
  -ms-transform: rotateX(0deg) translateY(0px);
  transform: rotateX(0deg) translateY(0px);
  transition-duration:1s;
  pointer-events: none;
}

.rotate {
-webkit-transform: rotateX(90deg) translateY(150px);
-moz-transform: rotateX(90deg) translateY(150px);
-o-transform: rotateX(90deg) translateY(150px);
-ms-transform: rotateX(90deg) translateY(150px);
transform: rotateX(90deg) translateY(150px);
transition-duration:1s;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ПРИДУМАТЬ</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="main">
      <button class="flipper">
          <h1 class="flip1">HELLO</h1>
          <h1 class="flip2 rotate">BYE</h1>
      </div>
    </div>
    <!-- скрипты -->
    <script src="/js/hover_blur.js"></script>
  </body>
</html>

Answer 1

Нужно поменять местами rotateX и translateY - у каждой трансформации своя точка отсчета и направление, и их положение зависит от предыдущей трансформы. В вашем случае первая трансформация - вращение элемента, а направление второй трансформации (сдвига) вращается вместе с ней. Элемент сдвигается не вниз, а вниз-вперед-вверх.

Вот рисунок, попытался изобразить элемент "сбоку" и то, как он располагается относительно изначального положения:

Ну и код:

$(function () {
 $('.flipper').on('mouseover', function (){
   $(this).children('h1').toggleClass('rotate');
 }).on('mouseleave', function () {
   $(this).children('h1').toggleClass('rotate');
 });
});

* {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: #FFDEE9;
  background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%);
}

.main {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flipper{
  border: 1px solid rgb(135, 135, 135);
  border-radius: 10px;
  position: relative;
  width: 300px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:rgba(0,255,0,0.2);
}
.flip2, .flip1{
  position: absolute;
  background-color:rgba(255,0,0,0.3);
}
h1 {
  font-size: 70px;
  transform: translateY(0px) rotateX(0deg) ;
  transition-duration:2s;
  pointer-events: none;
}

.rotate {
transform: translateY(40px) rotateX(90deg) ;
transition-duration:2s;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ПРИДУМАТЬ</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="main">
      <button class="flipper">
          <h1 class="flip1">HELLO</h1>
          <h1 class="flip2 rotate">BYE</h1>
      </div>
    </div>
    <!-- скрипты -->
    <script src="/js/hover_blur.js"></script>
  </body>
</html>

Хотя вообще в вашем случае стоит использовать Transform3d.

БЛОГ НА HUSL

css text flip в кнопке

Ответы (1 шт):