JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<div class="wrap">
    <div class="box">
    <div class="gallery">Gallery</div>
    <div class="back">
        <a href="" class="link_a">Art</a>
         <a href="" class="link_b">Art2</a>
    </div>
    </div>
</div>

CSS

.wrap {
  margin: 50px auto;
  width: 400px;
}

.box {
  position: relative;
  margin: 1em;
  height: 100px;
  width: 300px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.gallery, .back {
  position: absolute;
  height: 100px;
  width: 300px;
  font-family: helvetica, arial, sans-serif;
  font-size: 4em;
  line-height: 100px;
  text-align: center;
  margin: 0;
  padding: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

.gallery {
  -webkit-transform: translateZ(50px);
  transform: translateZ(50px);
}

.back {
  -webkit-transform: rotateX(90deg) translateZ(50px);
  transform: rotateX(90deg) translateZ(50px);
}

.back a:hover {
    color: blue;
}

.box {
    -webkit-transition: 2s;
    transition: 2s;
}

.wrap:hover .box {
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg)
}