<!DOCTYPE html>
<html>
<head>
<title>3D Box</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
}
.box {
width: 200px;
height: 200px;
position: relative;
perspective: 1000px;
transform-style: preserve-3d;
-webkit-animation: ani 6s linear infinite;
-o-animation: ani 6s linear infinite;
animation: ani 6s linear infinite;
}
.box__face {
position: absolute;
width: 200px;
height: 200px;
background-color: #4CAF50;
opacity: .8;
border: 2px solid #333;
box-sizing: border-box;
transition: transform 0.5s;
}
.box__face--front {
transform: translateZ(100px);
}
.box__face--back {
transform: rotateY(180deg) translateZ(100px);
}
.box__face--left {
transform: rotateY(-90deg) translateZ(100px);
}
.box__face--right {
transform: rotateY(90deg) translateZ(100px);
}
.box__face--top {
transform: rotateX(90deg) translateZ(100px);
}
.box__face--bottom {
transform: rotateX(-90deg) translateZ(100px);
}
.box:hover .box__face {
opacity: 1;
}
@keyframes ani{
20%{
transform: rotateZ(80deg);
}
40%{
transform: rotateY(80deg);
}
60%{
transform: rotateX(80deg);
}
80%{
transform: rotateZ(80deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="box__face box__face--front"></div>
<div class="box__face box__face--back"></div>
<div class="box__face box__face--left"></div>
<div class="box__face box__face--right"></div>
<div class="box__face box__face--
top"></div>
<div class="box__face box__face--bottom"></div>
</div>
</body>
</html>
Comments
Post a Comment