Помощь
4 или 5 запросов и уточняющих(ВМЕСТЕ)... к chatgpt.
Цитата
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.cube {
width: 300px;
height: 300px;
position: relative;
transform-style: preserve-3d;
animation: spin 20s linear infinite;
}
@keyframes spin {
from {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
.face {
position: absolute;
width: 100%;
height: 100%;
}
.front {
transform: translateZ(150px);
background-color: hsl(0, 100%, 50%);
}
.back {
transform: rotateY(180deg) translateZ(150px);
background-color: hsl(50, 100%, 50%);
}
.right {
transform: rotateY(90deg) translateZ(150px);
background-color: hsl(100, 100%, 50%);
}
.left {
transform: rotateY(-90deg) translateZ(150px);
background-color: hsl(150, 100%, 50%);
}
.top {
transform: rotateX(90deg) translateZ(150px);
background-color: hsl(200, 100%, 50%);
}
.bottom {
transform: rotateX(-90deg) translateZ(150px);
background-color: hsl(250, 100%, 50%);
}
</style>
</head>
<body>
<div class="cube">
<div class="face front"></div>
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
</body>
</html>
