3D Flip social buttons. Эффект переворота

Красивый и необычный эффект при наведении на кнопку — переворот кнопки с появлением соцкнопок.

HTML

<div class="container">
  <div class="button">
    <div class="front">
      Share
    </div>
    <div class="right">
      <a href="#">
        <i class="fa fa-twitter"></i>
      </a>
      <a href="#">
        <i class="fa fa-facebook"></i>
      </a>
      <a href="#">
        <i class="fa fa-pinterest-p"></i>
      </a>
    </div>
  </div>
</div>

CSS

.container {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 500px;
  -webkit-perspective: 500px;
  perspective-origin: 50%;
  -webkit-perspective-origin: 50%;
}

.button {
  height: 80px;
  width: 200px;
  position: relative;
  transition: .5s;
  transform-style: preserve-3d;
}

.button:hover {
  transform: rotateY(-90deg);
}

.front,
.right {
  background: white;
  height: 100%;
  width: 100%;
  position: absolute;
}

.front {
  transform: translateZ(100px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  letter-spacing: 1.7px;
  color: #000022;
  font-size: 28px;
  cursor: pointer;
}

.right {
  transform: rotateY(-270deg) translateX(100px);
  transform-origin: top right;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

a {
  text-decoration: none;
  display: flex;
  height: 40px;
  width: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  transition: .2s;
}

a:hover {
  transform: scale(1.15);
}

a:nth-child(1) {
  background: #22acfe;
}

a:nth-child(2) {
  background: #3f68c0;
}

a:nth-child(3) {
  background: #ea3145;
}

i.fa {
  color: #ffffff;
  font-size: 25px;
}

Оцените статью
( 1 оценка, среднее 5 из 5 )
Поделишься в соц. сетях? 🙂 Спасибо 🙏
Devtutor
Добавить комментарий