 |
| Saída gerada |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Rotating</title>
<meta http-equiv="refresh" content="7">
</head>
<style>
body{
font-family: sans-serif;
background: #d3eaff;
display: flex;
align-items: center;
justify-content: center;
height: 91vh;
}
.container{
perspective: 3000px;
}
.box{
display: block;
width: 250px;
height: 250px;
margin: 70px auto;
transform-style: preserve-3d;
transition: tarnsform 350ms;
animation: spin 10s infinite linear;
}
@keyframes spin {
0%{
transform: rotateY(0deg) translateZ(-120px);
}
100%{
transform: rotateY(360deg) translateZ(-120px);
}
}
.item, .shadow {
display: block;
width: 250px;
height: 250px;
position: absolute;
}
.item{
display: flex;
text-align: center;
justify-content: center;
font-size: 32px;
background: radial-gradient(#fff8, #0000);
border-radius: 1% ;
}
.item:nth-child(1){
transform: rotateY(90deg) translate3d(-125px, 0, 125px);
background: #ff1800;
}
.item:nth-child(2){
transform: translate3d(0, 0, 250px);
background: #ffab00;
}
.item:nth-child(3){
transform: rotateY(270deg) translate3d(125px, 0, 125px);
background: #ff1800;
}
.item:nth-child(4){
transform: rotateY(180deg) translate3d(0, 0, 0);
background: #00d419;
}
.shadow{
background: #999;
box-shadow: 0 0 20px #0003;
transform: rotateX(90deg) translate3d(0, 125px, -220px);
filter: blur(10px);
animation: none;
}
</style>
<body>
<div class="container">
<div class="box">
<div class="item">01</div>
<div class="item">02</div>
<div class="item">03</div>
<div class="item">04</div>
<div class="shadow"></div>
</div>
</div>
</body>
</html>
Nenhum comentário:
Postar um comentário