<!DOCTYPE html>
<html>
<head>
<div class=“container”>
<div class=“cube”>
<div class=“face left”>hi</div>
<div class=“face right”>Right</div>
<div class=“face front”>Front</div>
<div class=“face back”>Back</div>
</div>
</div>
<style>
.container {
width: 200px;
height: 200px;
perspective: 500px;
margin: 100px;
}
@keyframes turn {
from { transform: rotate3d(0, 0, 0, 0); }
to { transform: rotate3d(0, 1, 0, 360deg); }
}
.cube {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: turn 5s linear infinite;
}
.face {
width: 200px;
height: 200px;
background: skyblue;
border: 2px solid black;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, sans-serif;
font-size: 2rem;
outline: 2px solid rgba(233, 240, 241, 0.75);
transition: outline 0.65s ease 0s;
opacity: 0.6;
transition: opacity 0.65s ease 0s;
}
.cube:hover {
animation-play-state:paused;
}
.face:hover {
outline: 7px solid rgba(223, 245, 236, 0.85);
opacity: 1;
}
.front {
transform: translateZ(125px);
}
.back {
transform: translateZ(-125px) rotateY(180deg);
}
.left {
transform: translateX(-125px) rotateY(-90deg);
}
.right {
transform: translateX(125px) rotateY(90deg);
}
.top {
transform: translateY(-100px) rotateX(90deg);
display: none;
}
.bottom {
transform: translateY(100px) rotateX(-90deg);
display: none;
}
body {
background: black;
}
p {
color: white;
}
</style>
<body>
<p>
chicken
</p>
</body>
</html>
