<div class="transformed-1" data-text="1. Hover me">1. Hover me</div>
<div class="transformed-2" data-text="2. Hover me">2. Hover me</div>
<div class="transformed-3" data-text="3. Hover me">3. Hover me</div>
<div class="transformed-4" data-text="4. Hover me">4. Hover me</div>
<div class="transformed-5" data-text="5. Hover me">5. Hover me</div>
<div class="transformed-6" data-text="6. Hover me">6. Hover me</div>
<div class="transformed-7" data-text="7. Hover me">7. Hover me</div>
<div class="transformed-8" data-text="8. Hover me">8. Hover me</div>
.transformed-1 {
  padding: 10px;
  clip-path: inset(-200% -50% 0);
  color: #0000;
}

.transformed-1:before,
.transformed-1:after {
  content: attr(data-text);
  position: absolute;
  padding: inherit;
  color: #000;
  inset: 0;
  transition:.4s;
  transform-origin: bottom;
}
.transformed-1:after {
  transform: rotate(180deg);
  background: #000;
  color: #fff;
  opacity: 0;
}
.transformed-1:hover:before{
  transform: rotate(-180deg);
}
.transformed-1:hover:after{
  transform: rotate(0);
  opacity: 1;
}

.transformed-2 {
  padding: 10px;
  color: #0000;
}

.transformed-2:before,
.transformed-2:after {
  content: attr(data-text);
  position: absolute;
  padding: inherit;
  color: #000;
  inset: 0;
  transition:.4s;
  transform: scale(1);
  opacity: 1;
}
.transformed-2:after {
  transform: scale(2);
  opacity: 0;
  background: #000;
  color: #fff;
}
.transformed-2:hover:before{
  transform: scale(.3);
  opacity: 0;
}
.transformed-2:hover:after{
  transform: scale(1);
  opacity: 1;
}



.transformed-3 {
  padding: 10px;
  transform-style: preserve-3d;
  perspective: 200px;
  transition:.4s;
}
.transformed-3:hover{
  color: #0000;
}
.transformed-3:before {
  content: attr(data-text);
  position: absolute;
  padding: inherit;
  inset: 0;
  transform: translateY(-100%) rotateX(90deg);
  transform-origin: bottom;
  backface-visibility: hidden;
  background: #000;
  color: #fff;
  transition:.4s;
}
.transformed-3:hover:before{
  transform: translateY(0) rotateX(0deg);
}

.transformed-4 {
  padding: 10px;
  transform-style: preserve-3d;
  perspective: 200px;
  transition:.4s;
}
.transformed-4:hover{
  color: #0000;
}
.transformed-4:before {
  content: attr(data-text);
  position: absolute;
  padding: inherit;
  inset: 0;
  transform: translateY(100%) rotateX(-90deg);
  transform-origin: top;
  backface-visibility: hidden;
  background: #000;
  color: #fff;
  transition:.4s;
}
.transformed-4:hover:before{
  transform: translateY(0) rotateX(0deg);
}


.transformed-5 {
  padding: 10px;
  transform-style: preserve-3d;
  perspective: 200px;
  transition:.4s;
}
.transformed-5:hover{
  color: #0000;
}
.transformed-5:before,
.transformed-5:after {
  content: attr(data-text);
  position: absolute;
  padding: inherit;
  inset: 0;
  transform: translateX(-70%) rotateY(-90deg);
  clip-path: inset(0 50% 0 0);
  backface-visibility: hidden;
  background: #000;
  color: #fff;
  transition:.4s;
}
.transformed-5:after {
  transform: translateX(70%) rotateY(90deg);
  clip-path: inset(0 0 0 50%);
}
.transformed-5:hover:before,
.transformed-5:hover:after{
  transform: translateX(0) rotateY(0deg);
}


.transformed-6 {
  padding: 10px;
  transform-style: preserve-3d;
  perspective: 200px;
  transition:.4s;
}
.transformed-6:hover{
  color: #0000;
}
.transformed-6:before,
.transformed-6:after {
  content: attr(data-text);
  position: absolute;
  padding: inherit;
  inset: 0;
  transform: translateY(-70%) rotateX(90deg);
  clip-path: inset(0 0 50% 0);
  backface-visibility: hidden;
  background: #000;
  color: #fff;
  transition:.4s;
}
.transformed-6:after {
  transform: translateY(70%) rotateX(-90deg);
  clip-path: inset(50% 0 0 0);
}
.transformed-6:hover:before,
.transformed-6:hover:after{
  transform: translateY(0) rotateX(0deg);
}

.transformed-7 {
  padding: 10px;
  transition:.4s;
}
.transformed-7:hover{
  color: #0000;
}
.transformed-7:before,
.transformed-7:after {
  content: attr(data-text);
  position: absolute;
  padding: inherit;
  inset: 0;
  transform: rotate(90deg);
  transform-origin: top;
  clip-path: inset(0 50% 0 0);
  background: #000;
  color: #fff;
  opacity: 0;
  transition:.4s;
}
.transformed-7:after {
  transform: rotate(-90deg);
  clip-path: inset(0 0 0 50%);
}
.transformed-7:hover:before,
.transformed-7:hover:after{
  transform: rotate(0deg);
  opacity: 1;
}


.transformed-8 {
  padding: 10px;
  transform-style: preserve-3d;
  perspective: 200px;
  transition:.4s;
}
.transformed-8:hover{
  color: #0000;
}
.transformed-8:before {
  content: attr(data-text);
  position: absolute;
  padding: inherit;
  inset: 0;
  transform: translate(80%,-200%) translateZ(20px) rotateY(450deg);
  opacity: 0;
  background: #000;
  color: #fff;
  transition:.4s linear;
}
.transformed-8:hover:before{
  transform: translate(0) translateZ(0) rotateY(0deg);
  opacity: 1;
}  

/**/
[class] {
  display:inline-block;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  cursor:pointer;
  position: relative;
}
[class]:before,
[class]:after {
  pointer-events: none;
}

body {
  text-align:center;
  overflow:hidden;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.