css3d旋转20度,CSS 3D旋转

css

body {

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

background: radial-gradient(

circle,

rgba(255, 255, 255, 1) 0%,

rgba(184, 163, 96, 1) 71%,

rgba(121, 101, 46, 1) 100%

);

}

.wrapper {

transform-style: preserve-3d;

transform: rotatex(-26deg);

}

.t {

width: 200px;

height: 40px;

background: #0175c2;

background-image: url("https://picsum.photos/id/1069/200/400");

background-position: 0 calc(var(--i) * -40px + 40px);

position: relative;

transform-style: preserve-3d;

animation: spin 5s infinite;

animation-delay: calc(var(--i) * 0.15s);

transform-origin: center center 60px;

}

@keyframes spin {

0% {

transform: rotatey(0deg);

}

15%,

45% {

transform: rotatey(180deg);

}

100% {

transform: rotatey(360deg);

}

}

.t::before,

.t::after {

content: "";

position: absolute;

width: 200px;

height: 40px;

background: linear-gradient(

90deg,

rgba(0, 0, 0, 0) 0%,

rgba(0, 0, 0, 1) 100%

);

transform-origin: left;

box-shadow: inset 0 0 10px #000000;

top: 0;

}

.t::before {

background-color: #00ff00;

left: 0;

transform: rotatey(-60deg);

}

.t::after {

background-color: #0000ff;

right: -200px;

transform: rotatey(-120deg);

}