<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.