div+css实现三维风车旋转动画效果代码
代码语言：html
所属分类：三维
代码描述：div+css实现三维风车旋转动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: grid;
place-items: center;
min-height: 100vh;
background-image: radial-gradient(#8caeaf, #4d6e6f);
overflow: hidden;
perspective: 1000px;
}
body:hover .scene {
animation-play-state: paused;
}
body .scene, body .scene * {
transform-style: preserve-3d;
}
body .scene {
position: relative;
width: 70vmin;
height: 30vmin;
transform: rotateX(-30deg) rotateY(10deg) scale3d(1, 1, 1);
animation: rot 60s ease-in-out 2s infinite alternate;
}
@keyframes rot {
from {
transform: rotateX(-30deg) rotateY(10deg) scale(1, 1, 1);
}
to {
transform: rotateX(5deg) rotateY(1040deg) scale3d(1, 1, 1);
}
}
body .scene .cube, body .scene .cube *, body .scene .wedge, body .scene .wedge * {
position: absolute;
bottom: 0;
}
body .scene #ground {
z-index: -100;
width: 70vmin;
height: 3vmin;
transform: translateY(3vmin);
}
body .scene #ground .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene #ground .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene #ground .container .left {
width: 70vmin;
height: 3vmin;
background-color: #3F6A2A;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-35vmin);
}
body .scene #ground .container .right {
width: 70vmin;
height: 3vmin;
background-color: #3F6A2A;
transform-origin: left top;
transform: rotateY(90deg) translateX(-35vmin) translateZ(70vmin);
}
body .scene #ground .container .top {
background-color: #4a7c31;
width: 70vmin;
height: 70vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(35vmin) translateZ(3vmin);
}
body .scene #ground .container .bottom {
background-color: #4a7c31;
width: 70vmin;
height: 70vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(35vmin);
}
body .scene #ground .container .front {
background-color: #2e4d1e;
width: 70vmin;
height: 3vmin;
transform-origin: bottom left;
transform: translateZ(35vmin);
}
body .scene #ground .container .back {
background-color: #2e4d1e;
width: 70vmin;
height: 3vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(35vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene #ground .container .left, body .scene #ground .container .right, body .scene #ground .container .front, body .scene #ground .container .back {
background-image: linear-gradient(180deg, #0000 0% 20%, #487C2F 20% 45%, #0000 45% 100%);
}
body .scene #ground .container .bottom {
background-color: #E1B366;
filter: drop-shadow(0 0 3.75rem black);
}
body .scene #ground .container .top {
box-shadow: inset 0 0 15vmin #000a;
background-image: radial-gradient(#0000, #0000 15vmin), repeating-linear-gradient(180deg, #0000 0% 50%, #0001 50% 100%), repeating-linear-gradient(90deg, #0000 0% 50%, #0001 50% 100%);
background-size: 100%, 8em 8em, 8em 8em;
}
body .scene .windmill {
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
transform: translate3d(42vmin, -7.5vmin, 0) scale(1.5);
}
body .scene .windmill .base, body .scene .windmill .bottom, body .scene .windmill .top, body .scene .windmill .fan, body .scene .windmill .ledge, body .scene .windmill .roof, body .scene .windmill .stairs,
body .scene .windmill .arms, body .scene .windmill .arm-1, body .scene .windmill .arm-2, body .scene .windmill .arm-3, body .scene .windmill .arm-4, body .scene .windmill .blade,
body .scene .windmill .cogs, body .scene .windmill .cog, body .scene .windmill .spindle {
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
}
body .scene .windmill .base .container div {
box-shadow: inset 0 0 0.5vmin #7E592488, inset 0 0 0 0.05vmin #0002;
}
body .scene .windmill .base #base-left {
width: 2vmin;
height: 2vmin;
transform: translate3d(0, 0, 0);
}
body .scene .windmill .base #base-left .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .base #base-left .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .base #base-left .container .left {
width: 14vmin;
height: 2vmin;
background-color: #CAAD8B;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-7vmin);
}
body .scene .windmill .base #base-left .container .right {
width: 14vmin;
height: 2vmin;
background-color: #CAAD8B;
transform-origin: left top;
transform: rotateY(90deg) translateX(-7vmin) translateZ(2vmin);
}
body .scene .windmill .base #base-left .container .top {
background-color: #d2b99d;
width: 2vmin;
height: 14vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(7vmin) translateZ(2vmin);
}
body .scene .windmill .base #base-left .container .bottom {
background-color: #d2b99d;
width: 2vmin;
height: 14vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(7vmin);
}
body .scene .windmill .base #base-left .container .front {
background-color: #bd996f;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: translateZ(7vmin);
}
body .scene .windmill .base #base-left .container .back {
background-color: #bd996f;
width: 2vmin;
height: 2vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(7vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .base #base-left .container .top {
background-image: repeating-linear-gradient(to bottom, #0000 2vmin, #cfa776 2vmin 2.1vmin, #0000 2.1vmin 4vmin);
}
body .scene .windmill .base #base-right {
width: 2vmin;
height: 2vmin;
transform: translate3d(12vmin, 0, 0);
}
body .scene .windmill .base #base-right .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .base #base-right .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .base #base-right .container .left {
width: 14vmin;
height: 2vmin;
background-color: #CAAD8B;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-7vmin);
}
body .scene .windmill .base #base-right .container .right {
width: 14vmin;
height: 2vmin;
background-color: #CAAD8B;
transform-origin: left top;
transform: rotateY(90deg) translateX(-7vmin) translateZ(2vmin);
}
body .scene .windmill .base #base-right .container .top {
background-color: #d2b99d;
width: 2vmin;
height: 14vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(7vmin) translateZ(2vmin);
}
body .scene .windmill .base #base-right .container .bottom {
background-color: #d2b99d;
width: 2vmin;
height: 14vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(7vmin);
}
body .scene .windmill .base #base-right .container .front {
background-color: #bd996f;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: translateZ(7vmin);
}
body .scene .windmill .base #base-right .container .back {
background-color: #bd996f;
width: 2vmin;
height: 2vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(7vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .base #base-right .container .top {
background-image: repeating-linear-gradient(to bottom, #0000 2vmin, #cfa776 2vmin 2.1vmin, #0000 2.1vmin 4vmin);
}
body .scene .windmill .base #base-front {
width: 14vmin;
height: 2vmin;
transform: translate3d(0, 0, 6vmin);
}
body .scene .windmill .base #base-front .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .base #base-front .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .base #base-front .container .left {
width: 2vmin;
height: 2vmin;
background-color: #CAAD8B;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-1vmin);
}
body .scene .windmill .base #base-front .container .right {
width: 2vmin;
height: 2vmin;
background-color: #CAAD8B;
transform-origin: left top;
transform: rotateY(90deg) translateX(-1vmin) translateZ(14vmin);
}
body .scene .windmill .base #base-front .container .top {
background-color: #d2b99d;
width: 14vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(1vmin) translateZ(2vmin);
}
body .scene .windmill .base #base-front .container .bottom {
background-color: #d2b99d;
width: 14vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(1vmin);
}
body .scene .windmill .base #base-front .container .front {
background-color: #bd996f;
width: 14vmin;
height: 2vmin;
transform-origin: bottom left;
transform: translateZ(1vmin);
}
body .scene .windmill .base #base-front .container .back {
background-color: #bd996f;
width: 14vmin;
height: 2vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .base #base-front .container .bottom::after {
content: "";
width: 14vmin;
height: 14vmin;
transform: translateY(6vmin);
background-color: #d5b389;
box-shadow: inset 0 0 6vmin #000, 0 0 3vmin 1vmin #000a;
}
body .scene .windmill .base #base-front .container .top {
background-image: repeating-linear-gradient(to right, #0000 2vmin, #cfa776 2vmin 2.1vmin, #0000 2.1vmin 4vmin);
}
body .scene .windmill .base #base-back {
width: 14vmin;
height: 2vmin;
transform: translate3d(0, 0, -6vmin);
}
body .scene .windmill .base #base-back .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .base #base-back .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .base #base-back .container .left {
width: 2vmin;
height: 2vmin;
background-color: #CAAD8B;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-1vmin);
}
body .scene .windmill .base #base-back .container .right {
width: 2vmin;
height: 2vmin;
background-color: #CAAD8B;
transform-origin: left top;
transform: rotateY(90deg) translateX(-1vmin) translateZ(14vmin);
}
body .scene .windmill .base #base-back .container .top {
background-color: #d2b99d;
width: 14vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(1vmin) translateZ(2vmin);
}
body .scene .windmill .base #base-back .container .bottom {
background-color: #d2b99d;
width: 14vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(1vmin);
}
body .scene .windmill .base #base-back .container .front {
background-color: #bd996f;
width: 14vmin;
height: 2vmin;
transform-origin: bottom left;
transform: translateZ(1vmin);
}
body .scene .windmill .base #base-back .container .back {
background-color: #bd996f;
width: 14vmin;
height: 2vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .base #base-back .container .top {
background-image: repeating-linear-gradient(to right, #0000 2vmin, #cfa776 2vmin 2.1vmin, #0000 2.1vmin 4vmin);
}
body .scene .windmill .base #base-left-inner {
width: 1vmin;
height: 1vmin;
transform: translate3d(0.5vmin, -0.5vmin, 0);
}
body .scene .windmill .base #base-left-inner .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .base #base-left-inner .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .base #base-left-inner .container .left {
width: 15vmin;
height: 1vmin;
background-color: #988065;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-7.5vmin);
}
body .scene .windmill .base #base-left-inner .container .right {
width: 15vmin;
height: 1vmin;
background-color: #988065;
transform-origin: left top;
transform: rotateY(90deg) translateX(-7.5vmin) translateZ(1vmin);
}
body .scene .windmill .base #base-left-inner .container .top {
background-color: #a38d74;
width: 1vmin;
height: 15vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(7.5vmin) translateZ(1vmin);
}
body .scene .windmill .base #base-left-inner .container .bottom {
background-color: #a38d74;
width: 1vmin;
height: 15vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(7.5vmin);
}
body .scene .windmill .base #base-left-inner .container .front {
background-color: #7f6b55;
width: 1vmin;
height: 1vmin;
transform-origin: bottom left;
transform: translateZ(7.5vmin);
}
body .scene .windmill .base #base-left-inner .container .back {
background-color: #7f6b55;
width: 1vmin;
height: 1vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(7.5vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .base #base-right-inner {
width: 1vmin;
height: 1vmin;
transform: translate3d(12.5vmin, -0.5vmin, 0);
}
body .scene .windmill .base #base-right-inner .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .base #base-right-inner .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .base #base-right-inner .container .left {
width: 15vmin;
height: 1vmin;
background-color: #988065;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-7.5vmin);
}
body .scene .windmill .base #base-right-inner .container .right {
width: 15vmin;
height: 1vmin;
background-color: #988065;
transform-origin: left top;
transform: rotateY(90deg) translateX(-7.5vmin) translateZ(1vmin);
}
body .scene .windmill .base #base-right-inner .container .top {
background-color: #a38d74;
width: 1vmin;
height: 15vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(7.5vmin) translateZ(1vmin);
}
body .scene .windmill .base #base-right-inner .container .bottom {
background-color: #a38d74;
width: 1vmin;
height: 15vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(7.5vmin);
}
body .scene .windmill .base #base-right-inner .container .front {
background-color: #7f6b55;
width: 1vmin;
height: 1vmin;
transform-origin: bottom left;
transform: translateZ(7.5vmin);
}
body .scene .windmill .base #base-right-inner .container .back {
background-color: #7f6b55;
width: 1vmin;
height: 1vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(7.5vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .base #base-front-inner {
width: 15vmin;
height: 1vmin;
transform: translate3d(-0.5vmin, -0.5vmin, 6vmin);
}
body .scene .windmill .base #base-front-inner .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .base #base-front-inner .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .base #base-front-inner .container .left {
width: 1vmin;
height: 1vmin;
background-color: #988065;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-0.5vmin);
}
body .scene .windmill .base #base-front-inner .container .right {
width: 1vmin;
height: 1vmin;
background-color: #988065;
transform-origin: left top;
transform: rotateY(90deg) translateX(-0.5vmin) translateZ(15vmin);
}
body .scene .windmill .base #base-front-inner .container .top {
background-color: #a38d74;
width: 15vmin;
height: 1vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(0.5vmin) translateZ(1vmin);
}
body .scene .windmill .base #base-front-inner .container .bottom {
background-color: #a38d74;
width: 15vmin;
height: 1vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(0.5vmin);
}
body .scene .windmill .base #base-front-inner .container .front {
background-color: #7f6b55;
width: 15vmin;
height: 1vmin;
transform-origin: bottom left;
transform: translateZ(0.5vmin);
}
body .scene .windmill .base #base-front-inner .container .back {
background-color: #7f6b55;
width: 15vmin;
height: 1vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .base #base-back-inner {
width: 15vmin;
height: 1vmin;
transform: translate3d(-0.5vmin, -0.5vmin, -6vmin);
}
body .scene .windmill .base #base-back-inner .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .base #base-back-inner .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .base #base-back-inner .container .left {
width: 1vmin;
height: 1vmin;
background-color: #988065;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-0.5vmin);
}
body .scene .windmill .base #base-back-inner .container .right {
width: 1vmin;
height: 1vmin;
background-color: #988065;
transform-origin: left top;
transform: rotateY(90deg) translateX(-0.5vmin) translateZ(15vmin);
}
body .scene .windmill .base #base-back-inner .container .top {
background-color: #a38d74;
width: 15vmin;
height: 1vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(0.5vmin) translateZ(1vmin);
}
body .scene .windmill .base #base-back-inner .container .bottom {
background-color: #a38d74;
width: 15vmin;
height: 1vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(0.5vmin);
}
body .scene .windmill .base #base-back-inner .container .front {
background-color: #7f6b55;
width: 15vmin;
height: 1vmin;
transform-origin: bottom left;
transform: translateZ(0.5vmin);
}
body .scene .windmill .base #base-back-inner .container .back {
background-color: #7f6b55;
width: 15vmin;
height: 1vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .base #base-left-inner .container .back, body .scene .windmill .base #base-left-inner .container .front, body .scene .windmill .base #base-right-inner .container .back, body .scene .windmill .base #base-right-inner .container .front {
background-image: radial-gradient(circle, #0004 50%, #0000 50% 100%);
}
body .scene .windmill .base #base-back-inner .container .left, body .scene .windmill .base #base-back-inner .container .right, body .scene .windmill .base #base-front-inner .container .left, body .scene .windmill .base #base-front-inner .container .right {
background-image: radial-gradient(circle, #0004 50%, #0000 50% 100%);
}
body .scene .windmill .stairs #stairs {
z-index: 100;
width: 2vmin;
height: 2vmin;
transform-origin: right bottom;
transform: translate3d(5vmin, -0.1vmin, 9vmin) rotateY(90deg);
}
body .scene .windmill .stairs #stairs .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .stairs #stairs .container .base {
position: absolute;
bottom: 0;
left: 0;
width: calc(0.5vmin * 8);
height: 4vmin;
background-color: #cfa776;
transform: rotateX(90deg) translateZ(calc(4vmin / -2));
}
body .scene .windmill .stairs #stairs .container .steps {
position: relative;
width: 100%;
height: 100%;
left: -0.5vmin;
bottom: 0;
}
body .scene .windmill .stairs #stairs .container .steps .step:nth-child(1) {
position: absolute;
left: calc(0.5vmin * 1);
bottom: 0;
width: 0.5vmin;
height: calc(0.25vmin * 1);
}
body .scene .windmill .stairs #stairs .container .steps .step:nth-child(2) {
position: absolute;
left: calc(0.5vmin * 2);
bottom: 0;
width: 0.5vmin;
height: calc(0.25vmin * 2);
}
body .scene .windmill .stairs #stairs .container .steps .step:nth-child(3) {
position: absolute;
left: calc(0.5vmin * 3);
bottom: 0;
width: 0.5vmin;
height: calc(0.25vmin * 3);
}
body .scene .windmill .stairs #stairs .container .steps .step:nth-child(4) {
position: absolute;
left: calc(0.5vmin * 4);
bottom: 0;
width: 0.5vmin;
height: calc(0.25vmin * 4);
}
body .scene .windmill .stairs #stairs .container .steps .step:nth-child(5) {
position: absolute;
left: calc(0.5vmin * 5);
bottom: 0;
width: 0.5vmin;
height: calc(0.25vmin * 5);
}
body .scene .windmill .stairs #stairs .container .steps .step:nth-child(6) {
position: absolute;
left: calc(0.5vmin * 6);
bottom: 0;
width: 0.5vmin;
height: calc(0.25vmin * 6);
}
body .scene .windmill .stairs #stairs .container .steps .step:nth-child(7) {
position: absolute;
left: calc(0.5vmin * 7);
bottom: 0;
width: 0.5vmin;
height: calc(0.25vmin * 7);
}
body .scene .windmill .stairs #stairs .container .steps .step:nth-child(8) {
position: absolute;
left: calc(0.5vmin * 8);
bottom: 0;
width: 0.5vmin;
height: calc(0.25vmin * 8);
}
body .scene .windmill .stairs #stairs .container .steps .step:last-child span:nth-child(2)::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4vmin;
height: 100%;
background-color: #c89a63;
transform-origin: left;
transform: rotateY(-90deg) translateZ(-0.5vmin);
}
body .scene .windmill .stairs #stairs .container .steps .step:last-child span:nth-child(1)::before {
content: "";
position: absolute;
bottom: 0;
left: 0.5vmin;
width: calc(0.5vmin * 8);
height: 4vmin;
background-color: #c89a63;
transform-origin: bottom left;
transform: rotateY(180deg) rotateX(-90deg);
}
body .scene .windmill .stairs #stairs .container .steps .step:hover::before {
filter: brightness(1.1);
cursor: pointer;
}
body .scene .windmill .stairs #stairs .container .steps .step::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0.5vmin;
height: 4vmin;
background-color: #DCBF9C;
transform: rotateX(90deg) translateZ(calc(4vmin / 2));
}
body .scene .windmill .stairs #stairs .container .steps .step::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4vmin;
height: 0.25vmin;
background-color: #cca26f;
transform: rotateY(90deg) translateZ(calc(4vmin / -2));
}
body .scene .windmill .stairs #stairs .container .steps .step span {
position: absolute;
display: block;
width: 0.5vmin;
height: 100%;
background-color: #cfa776;
}
body .scene .windmill .stairs #stairs .container .steps .step span:nth-child(1) {
transform: translateZ(calc(4vmin / 2));
}
body .scene .windmill .stairs #stairs .container .steps .step span:nth-child(2) {
transform: translateZ(calc(4vmin / -2));
}
body .scene .windmill .stairs #stairs .container .base {
box-shadow: 0 0 3vmin black;
}
body .scene .windmill .bottom .container div {
box-shadow: inset 0 0 0.5vmin #7E592488, inset 0 0 0 0.05vmin #0002;
}
body .scene .windmill .bottom .container .left, body .scene .windmill .bottom .container .right, body .scene .windmill .bottom .container .back, body .scene .windmill .bottom .container .front {
background-image: radial-gradient(circle at 0.5vmin 0.5vmin, #0002 0.1vmin, #0000 0.1vmin), radial-gradient(circle at calc(100% - 0.5vmin) 0.5vmin, #0002 0.1vmin, #0000 0.1vmin), radial-gradient(circle at calc(100% - 0.5vmin) calc(100% - 0.5vmin), #0002 0.1vmin, #0000 0.1vmin), radial-gradient(circle at 0.5vmin calc(100% - 0.5vmin), #0002 0.1vmin, #0000 0.1vmin);
}
body .scene .windmill .bottom #bottom-left-back {
width: 2vmin;
height: 8vmin;
transform: translate3d(2vmin, 0vmin, -4vmin);
}
body .scene .windmill .bottom #bottom-left-back .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .bottom #bottom-left-back .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .bottom #bottom-left-back .container .left {
width: 2vmin;
height: 8vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-1vmin);
}
body .scene .windmill .bottom #bottom-left-back .container .right {
width: 2vmin;
height: 8vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-left-back .container .top {
background-color: #e3cbaf;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(1vmin) translateZ(8vmin);
}
body .scene .windmill .bottom #bottom-left-back .container .bottom {
background-color: #e3cbaf;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(1vmin);
}
body .scene .windmill .bottom #bottom-left-back .container .front {
background-color: #d1ac7e;
width: 2vmin;
height: 8vmin;
transform-origin: bottom left;
transform: translateZ(1vmin);
}
body .scene .windmill .bottom #bottom-left-back .container .back {
background-color: #d1ac7e;
width: 2vmin;
height: 8vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .bottom #bottom-right-back {
width: 2vmin;
height: 8vmin;
transform: translate3d(10vmin, 0vmin, -4vmin);
}
body .scene .windmill .bottom #bottom-right-back .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .bottom #bottom-right-back .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .bottom #bottom-right-back .container .left {
width: 2vmin;
height: 8vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-1vmin);
}
body .scene .windmill .bottom #bottom-right-back .container .right {
width: 2vmin;
height: 8vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-right-back .container .top {
background-color: #e3cbaf;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(1vmin) translateZ(8vmin);
}
body .scene .windmill .bottom #bottom-right-back .container .bottom {
background-color: #e3cbaf;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(1vmin);
}
body .scene .windmill .bottom #bottom-right-back .container .front {
background-color: #d1ac7e;
width: 2vmin;
height: 8vmin;
transform-origin: bottom left;
transform: translateZ(1vmin);
}
body .scene .windmill .bottom #bottom-right-back .container .back {
background-color: #d1ac7e;
width: 2vmin;
height: 8vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .bottom #bottom-left-front {
width: 2vmin;
height: 8vmin;
transform: translate3d(2vmin, 0vmin, 4vmin);
}
body .scene .windmill .bottom #bottom-left-front .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .bottom #bottom-left-front .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .bottom #bottom-left-front .container .left {
width: 2vmin;
height: 8vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-1vmin);
}
body .scene .windmill .bottom #bottom-left-front .container .right {
width: 2vmin;
height: 8vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-left-front .container .top {
background-color: #e3cbaf;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(1vmin) translateZ(8vmin);
}
body .scene .windmill .bottom #bottom-left-front .container .bottom {
background-color: #e3cbaf;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(1vmin);
}
body .scene .windmill .bottom #bottom-left-front .container .front {
background-color: #d1ac7e;
width: 2vmin;
height: 8vmin;
transform-origin: bottom left;
transform: translateZ(1vmin);
}
body .scene .windmill .bottom #bottom-left-front .container .back {
background-color: #d1ac7e;
width: 2vmin;
height: 8vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .bottom #bottom-right-front {
width: 2vmin;
height: 8vmin;
transform: translate3d(10vmin, 0vmin, 4vmin);
}
body .scene .windmill .bottom #bottom-right-front .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .bottom #bottom-right-front .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .bottom #bottom-right-front .container .left {
width: 2vmin;
height: 8vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-1vmin);
}
body .scene .windmill .bottom #bottom-right-front .container .right {
width: 2vmin;
height: 8vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-right-front .container .top {
background-color: #e3cbaf;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(1vmin) translateZ(8vmin);
}
body .scene .windmill .bottom #bottom-right-front .container .bottom {
background-color: #e3cbaf;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(1vmin);
}
body .scene .windmill .bottom #bottom-right-front .container .front {
background-color: #d1ac7e;
width: 2vmin;
height: 8vmin;
transform-origin: bottom left;
transform: translateZ(1vmin);
}
body .scene .windmill .bottom #bottom-right-front .container .back {
background-color: #d1ac7e;
width: 2vmin;
height: 8vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .bottom #bottom-left-1 {
width: 2vmin;
height: 2vmin;
transform: translate3d(2vmin, -2vmin, 0vmin);
}
body .scene .windmill .bottom #bottom-left-1 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .bottom #bottom-left-1 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .bottom #bottom-left-1 .container .left {
width: 6vmin;
height: 2vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-3vmin);
}
body .scene .windmill .bottom #bottom-left-1 .container .right {
width: 6vmin;
height: 2vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(90deg) translateX(-3vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-left-1 .container .top {
background-color: #e3cbaf;
width: 2vmin;
height: 6vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(3vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-left-1 .container .bottom {
background-color: #e3cbaf;
width: 2vmin;
height: 6vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(3vmin);
}
body .scene .windmill .bottom #bottom-left-1 .container .front {
background-color: #d1ac7e;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: translateZ(3vmin);
}
body .scene .windmill .bottom #bottom-left-1 .container .back {
background-color: #d1ac7e;
width: 2vmin;
height: 2vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(3vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .bottom #bottom-left-2 {
width: 2vmin;
height: 2vmin;
transform: translate3d(2vmin, -4vmin, 0vmin);
}
body .scene .windmill .bottom #bottom-left-2 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .bottom #bottom-left-2 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .bottom #bottom-left-2 .container .left {
width: 6vmin;
height: 2vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-3vmin);
}
body .scene .windmill .bottom #bottom-left-2 .container .right {
width: 6vmin;
height: 2vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(90deg) translateX(-3vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-left-2 .container .top {
background-color: #e3cbaf;
width: 2vmin;
height: 6vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(3vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-left-2 .container .bottom {
background-color: #e3cbaf;
width: 2vmin;
height: 6vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(3vmin);
}
body .scene .windmill .bottom #bottom-left-2 .container .front {
background-color: #d1ac7e;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: translateZ(3vmin);
}
body .scene .windmill .bottom #bottom-left-2 .container .back {
background-color: #d1ac7e;
width: 2vmin;
height: 2vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(3vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .bottom #bottom-left-3 {
width: 2vmin;
height: 1vmin;
transform: translate3d(2vmin, -6vmin, 0vmin);
}
body .scene .windmill .bottom #bottom-left-3 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .bottom #bottom-left-3 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .bottom #bottom-left-3 .container .left {
width: 6vmin;
height: 1vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-3vmin);
}
body .scene .windmill .bottom #bottom-left-3 .container .right {
width: 6vmin;
height: 1vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(90deg) translateX(-3vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-left-3 .container .top {
background-color: #e3cbaf;
width: 2vmin;
height: 6vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(3vmin) translateZ(1vmin);
}
body .scene .windmill .bottom #bottom-left-3 .container .bottom {
background-color: #e3cbaf;
width: 2vmin;
height: 6vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(3vmin);
}
body .scene .windmill .bottom #bottom-left-3 .container .front {
background-color: #d1ac7e;
width: 2vmin;
height: 1vmin;
transform-origin: bottom left;
transform: translateZ(3vmin);
}
body .scene .windmill .bottom #bottom-left-3 .container .back {
background-color: #d1ac7e;
width: 2vmin;
height: 1vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(3vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .bottom #bottom-right-1 {
width: 2vmin;
height: 2vmin;
transform: translate3d(10vmin, -2vmin, 0vmin);
}
body .scene .windmill .bottom #bottom-right-1 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .bottom #bottom-right-1 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .bottom #bottom-right-1 .container .left {
width: 6vmin;
height: 2vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-3vmin);
}
body .scene .windmill .bottom #bottom-right-1 .container .right {
width: 6vmin;
height: 2vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(90deg) translateX(-3vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-right-1 .container .top {
background-color: #e3cbaf;
width: 2vmin;
height: 6vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(3vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-right-1 .container .bottom {
background-color: #e3cbaf;
width: 2vmin;
height: 6vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(3vmin);
}
body .scene .windmill .bottom #bottom-right-1 .container .front {
background-color: #d1ac7e;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: translateZ(3vmin);
}
body .scene .windmill .bottom #bottom-right-1 .container .back {
background-color: #d1ac7e;
width: 2vmin;
height: 2vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(3vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .bottom #bottom-right-2 {
width: 2vmin;
height: 2vmin;
transform: translate3d(10vmin, -4vmin, 0vmin);
}
body .scene .windmill .bottom #bottom-right-2 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .bottom #bottom-right-2 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .bottom #bottom-right-2 .container .left {
width: 6vmin;
height: 2vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-3vmin);
}
body .scene .windmill .bottom #bottom-right-2 .container .right {
width: 6vmin;
height: 2vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(90deg) translateX(-3vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-right-2 .container .top {
background-color: #e3cbaf;
width: 2vmin;
height: 6vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(3vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-right-2 .container .bottom {
background-color: #e3cbaf;
width: 2vmin;
height: 6vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(3vmin);
}
body .scene .windmill .bottom #bottom-right-2 .container .front {
background-color: #d1ac7e;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: translateZ(3vmin);
}
body .scene .windmill .bottom #bottom-right-2 .container .back {
background-color: #d1ac7e;
width: 2vmin;
height: 2vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(3vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .bottom #bottom-right-3 {
width: 2vmin;
height: 2vmin;
transform: translate3d(10vmin, -6vmin, 0vmin);
}
body .scene .windmill .bottom #bottom-right-3 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .bottom #bottom-right-3 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .bottom #bottom-right-3 .container .left {
width: 6vmin;
height: 2vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-3vmin);
}
body .scene .windmill .bottom #bottom-right-3 .container .right {
width: 6vmin;
height: 2vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(90deg) translateX(-3vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-right-3 .container .top {
background-color: #e3cbaf;
width: 2vmin;
height: 6vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(3vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-right-3 .container .bottom {
background-color: #e3cbaf;
width: 2vmin;
height: 6vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(3vmin);
}
body .scene .windmill .bottom #bottom-right-3 .container .front {
background-color: #d1ac7e;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: translateZ(3vmin);
}
body .scene .windmill .bottom #bottom-right-3 .container .back {
background-color: #d1ac7e;
width: 2vmin;
height: 2vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(3vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .bottom #bottom-back-1 {
width: 6vmin;
height: 2vmin;
transform: translate3d(4vmin, -2vmin, -4vmin);
}
body .scene .windmill .bottom #bottom-back-1 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .bottom #bottom-back-1 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .bottom #bottom-back-1 .container .left {
width: 2vmin;
height: 2vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-1vmin);
}
body .scene .windmill .bottom #bottom-back-1 .container .right {
width: 2vmin;
height: 2vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(90deg) translateX(-1vmin) translateZ(6vmin);
}
body .scene .windmill .bottom #bottom-back-1 .container .top {
background-color: #e3cbaf;
width: 6vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(1vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-back-1 .container .bottom {
background-color: #e3cbaf;
width: 6vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(1vmin);
}
body .scene .windmill .bottom #bottom-back-1 .container .front {
background-color: #d1ac7e;
width: 6vmin;
height: 2vmin;
transform-origin: bottom left;
transform: translateZ(1vmin);
}
body .scene .windmill .bottom #bottom-back-1 .container .back {
background-color: #d1ac7e;
width: 6vmin;
height: 2vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .bottom #bottom-back-2 {
width: 6vmin;
height: 2vmin;
transform: translate3d(4vmin, -4vmin, -4vmin);
}
body .scene .windmill .bottom #bottom-back-2 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .bottom #bottom-back-2 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .bottom #bottom-back-2 .container .left {
width: 2vmin;
height: 2vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-1vmin);
}
body .scene .windmill .bottom #bottom-back-2 .container .right {
width: 2vmin;
height: 2vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(90deg) translateX(-1vmin) translateZ(6vmin);
}
body .scene .windmill .bottom #bottom-back-2 .container .top {
background-color: #e3cbaf;
width: 6vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(1vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-back-2 .container .bottom {
background-color: #e3cbaf;
width: 6vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(1vmin);
}
body .scene .windmill .bottom #bottom-back-2 .container .front {
background-color: #d1ac7e;
width: 6vmin;
height: 2vmin;
transform-origin: bottom left;
transform: translateZ(1vmin);
}
body .scene .windmill .bottom #bottom-back-2 .container .back {
background-color: #d1ac7e;
width: 6vmin;
height: 2vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .bottom #bottom-back-3 {
width: 6vmin;
height: 2vmin;
transform: translate3d(4vmin, -6vmin, -4vmin);
}
body .scene .windmill .bottom #bottom-back-3 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .bottom #bottom-back-3 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .bottom #bottom-back-3 .container .left {
width: 2vmin;
height: 2vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-1vmin);
}
body .scene .windmill .bottom #bottom-back-3 .container .right {
width: 2vmin;
height: 2vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(90deg) translateX(-1vmin) translateZ(6vmin);
}
body .scene .windmill .bottom #bottom-back-3 .container .top {
background-color: #e3cbaf;
width: 6vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(1vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-back-3 .container .bottom {
background-color: #e3cbaf;
width: 6vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(1vmin);
}
body .scene .windmill .bottom #bottom-back-3 .container .front {
background-color: #d1ac7e;
width: 6vmin;
height: 2vmin;
transform-origin: bottom left;
transform: translateZ(1vmin);
}
body .scene .windmill .bottom #bottom-back-3 .container .back {
background-color: #d1ac7e;
width: 6vmin;
height: 2vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .bottom #bottom-front-left {
width: 2vmin;
height: 2vmin;
transform: translate3d(4vmin, -2vmin, 4vmin) rotateZ(90deg);
}
body .scene .windmill .bottom #bottom-front-left .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .bottom #bottom-front-left .container * {
position: absolute;
bottom: 0;
}
body .scene .windmill .bottom #bottom-front-left .container .side {
width: 2vmin;
height: 2vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-1vmin);
}
body .scene .windmill .bottom #bottom-front-left .container .top {
background-color: #e3cbaf;
width: 2.8284271247vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(1vmin) translateZ(2vmin) rotateY(45deg);
}
body .scene .windmill .bottom #bottom-front-left .container .bottom {
background-color: #e3cbaf;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(1vmin);
}
body .scene .windmill .bottom #bottom-front-left .container .front {
background-color: #d1ac7e;
width: 2vmin;
height: 2vmin;
clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
transform-origin: bottom left;
transform: translateZ(1vmin);
}
body .scene .windmill .bottom #bottom-front-left .container .back {
background-color: #d1ac7e;
width: 2vmin;
height: 2vmin;
clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
transform-origin: center;
transform: rotateY(180deg) translateZ(1vmin);
}
body .scene .windmill .bottom #bottom-front-right {
width: 2vmin;
height: 2vmin;
transform: translate3d(8vmin, -2vmin, 4vmin) rotateZ(-90deg);
}
body .scene .windmill .bottom #bottom-front-right .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .bottom #bottom-front-right .container * {
position: absolute;
bottom: 0;
}
body .scene .windmill .bottom #bottom-front-right .container .side {
width: 2vmin;
height: 2vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-front-right .container .top {
background-color: #e3cbaf;
width: 2.8284271247vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(1vmin) rotateY(-45deg);
}
body .scene .windmill .bottom #bottom-front-right .container .bottom {
background-color: #e3cbaf;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(1vmin);
}
body .scene .windmill .bottom #bottom-front-right .container .front {
background-color: #d1ac7e;
width: 2vmin;
height: 2vmin;
clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
transform-origin: bottom left;
transform: translateZ(1vmin);
}
body .scene .windmill .bottom #bottom-front-right .container .back {
background-color: #d1ac7e;
width: 2vmin;
height: 2vmin;
clip-path: polygon(0% 100%, 100% 100%, 0% 0%);
transform-origin: center;
transform: rotateY(180deg) translateZ(1vmin);
}
body .scene .windmill .bottom #bottom-front-2 {
width: 6vmin;
height: 2vmin;
transform: translate3d(4vmin, -4vmin, 4vmin);
}
body .scene .windmill .bottom #bottom-front-2 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .bottom #bottom-front-2 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .bottom #bottom-front-2 .container .left {
width: 2vmin;
height: 2vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-1vmin);
}
body .scene .windmill .bottom #bottom-front-2 .container .right {
width: 2vmin;
height: 2vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(90deg) translateX(-1vmin) translateZ(6vmin);
}
body .scene .windmill .bottom #bottom-front-2 .container .top {
background-color: #e3cbaf;
width: 6vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(1vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-front-2 .container .bottom {
background-color: #e3cbaf;
width: 6vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(1vmin);
}
body .scene .windmill .bottom #bottom-front-2 .container .front {
background-color: #d1ac7e;
width: 6vmin;
height: 2vmin;
transform-origin: bottom left;
transform: translateZ(1vmin);
}
body .scene .windmill .bottom #bottom-front-2 .container .back {
background-color: #d1ac7e;
width: 6vmin;
height: 2vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .bottom #bottom-front-3 {
width: 6vmin;
height: 2vmin;
transform: translate3d(4vmin, -6vmin, 4vmin);
}
body .scene .windmill .bottom #bottom-front-3 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .bottom #bottom-front-3 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .bottom #bottom-front-3 .container .left {
width: 2vmin;
height: 2vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-1vmin);
}
body .scene .windmill .bottom #bottom-front-3 .container .right {
width: 2vmin;
height: 2vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(90deg) translateX(-1vmin) translateZ(6vmin);
}
body .scene .windmill .bottom #bottom-front-3 .container .top {
background-color: #e3cbaf;
width: 6vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(1vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-front-3 .container .bottom {
background-color: #e3cbaf;
width: 6vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(1vmin);
}
body .scene .windmill .bottom #bottom-front-3 .container .front {
background-color: #d1ac7e;
width: 6vmin;
height: 2vmin;
transform-origin: bottom left;
transform: translateZ(1vmin);
}
body .scene .windmill .bottom #bottom-front-3 .container .back {
background-color: #d1ac7e;
width: 6vmin;
height: 2vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .bottom #bottom-top-1 {
width: 2vmin;
height: 2vmin;
transform: translate3d(2vmin, -8vmin, 0vmin);
}
body .scene .windmill .bottom #bottom-top-1 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .bottom #bottom-top-1 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .bottom #bottom-top-1 .container .left {
width: 10vmin;
height: 2vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-5vmin);
}
body .scene .windmill .bottom #bottom-top-1 .container .right {
width: 10vmin;
height: 2vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(90deg) translateX(-5vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-top-1 .container .top {
background-color: #e3cbaf;
width: 2vmin;
height: 10vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(5vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-top-1 .container .bottom {
background-color: #e3cbaf;
width: 2vmin;
height: 10vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(5vmin);
}
body .scene .windmill .bottom #bottom-top-1 .container .front {
background-color: #d1ac7e;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: translateZ(5vmin);
}
body .scene .windmill .bottom #bottom-top-1 .container .back {
background-color: #d1ac7e;
width: 2vmin;
height: 2vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(5vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .bottom #bottom-top-2 {
width: 4vmin;
height: 2vmin;
transform: translate3d(4vmin, -8vmin, 0vmin);
}
body .scene .windmill .bottom #bottom-top-2 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .bottom #bottom-top-2 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .bottom #bottom-top-2 .container .left {
width: 10vmin;
height: 2vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-5vmin);
}
body .scene .windmill .bottom #bottom-top-2 .container .right {
width: 10vmin;
height: 2vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(90deg) translateX(-5vmin) translateZ(4vmin);
}
body .scene .windmill .bottom #bottom-top-2 .container .top {
background-color: #e3cbaf;
width: 4vmin;
height: 10vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(5vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-top-2 .container .bottom {
background-color: #e3cbaf;
width: 4vmin;
height: 10vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(5vmin);
}
body .scene .windmill .bottom #bottom-top-2 .container .front {
background-color: #d1ac7e;
width: 4vmin;
height: 2vmin;
transform-origin: bottom left;
transform: translateZ(5vmin);
}
body .scene .windmill .bottom #bottom-top-2 .container .back {
background-color: #d1ac7e;
width: 4vmin;
height: 2vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(5vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .top .container div {
background-image: radial-gradient(circle at 0.5vmin 0.5vmin, #0002 0.1vmin, #0000 0.1vmin), radial-gradient(circle at calc(100% - 0.5vmin) 0.5vmin, #0002 0.1vmin, #0000 0.1vmin), radial-gradient(circle at calc(100% - 0.5vmin) calc(100% - 0.5vmin), #0002 0.1vmin, #0000 0.1vmin), radial-gradient(circle at 0.5vmin calc(100% - 0.5vmin), #0002 0.1vmin, #0000 0.1vmin);
box-shadow: inset 0 0 0.5vmin #7E592488, inset 0 0 0 0.05vmin #0002;
}
body .scene .windmill .top #top-left-1 {
width: 2vmin;
height: 14vmin;
transform: translate3d(4vmin, -10vmin, -4vmin);
}
body .scene .windmill .top #top-left-1 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .top #top-left-1 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .top #top-left-1 .container .left {
width: 2vmin;
height: 14vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-1vmin);
}
body .scene .windmill .top #top-left-1 .container .right {
width: 2vmin;
height: 14vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin);
}
body .scene .windmill .top #top-left-1 .container .top {
background-color: #e3cbaf;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(1vmin) translateZ(14vmin);
}
body .scene .windmill .top #top-left-1 .container .bottom {
background-color: #e3cbaf;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(1vmin);
}
body .scene .windmill .top #top-left-1 .container .front {
background-color: #d1ac7e;
width: 2vmin;
height: 14vmin;
transform-origin: bottom left;
transform: translateZ(1vmin);
}
body .scene .windmill .top #top-left-1 .container .back {
background-color: #d1ac7e;
width: 2vmin;
height: 14vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .top #top-left-2-top {
width: 6vmin;
height: 2vmin;
transform: translate3d(4vmin, -22vmin, -2vmin);
}
body .scene .windmill .top #top-left-2-top .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .top #top-left-2-top .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .top #top-left-2-top .container .left {
width: 2vmin;
height: 2vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-1vmin);
}
body .scene .windmill .top #top-left-2-top .container .right {
width: 2vmin;
height: 2vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(90deg) translateX(-1vmin) translateZ(6vmin);
}
body .scene .windmill .top #top-left-2-top .container .top {
background-color: #e3cbaf;
width: 6vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(1vmin) translateZ(2vmin);
}
body .scene .windmill .top #top-left-2-top .container .bottom {
background-color: #e3cbaf;
width: 6vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(1vmin);
}
body .scene .windmill .top #top-left-2-top .container .front {
background-color: #d1ac7e;
width: 6vmin;
height: 2vmin;
transform-origin: bottom left;
transform: translateZ(1vmin);
}
body .scene .windmill .top #top-left-2-top .container .back {
background-color: #d1ac7e;
width: 6vmin;
height: 2vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .top #top-left-2-bottom {
width: 2vmin;
height: 8vmin;
transform: translate3d(4vmin, -10vmin, -2vmin);
}
body .scene .windmill .top #top-left-2-bottom .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .top #top-left-2-bottom .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .top #top-left-2-bottom .container .left {
width: 2vmin;
height: 8vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-1vmin);
}
body .scene .windmill .top #top-left-2-bottom .container .right {
width: 2vmin;
height: 8vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin);
}
body .scene .windmill .top #top-left-2-bottom .container .top {
background-color: #e3cbaf;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(1vmin) translateZ(8vmin);
}
body .scene .windmill .top #top-left-2-bottom .container .bottom {
background-color: #e3cbaf;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(1vmin);
}
body .scene .windmill .top #top-left-2-bottom .container .front {
background-color: #d1ac7e;
width: 2vmin;
height: 8vmin;
transform-origin: bottom left;
transform: translateZ(1vmin);
}
body .scene .windmill .top #top-left-2-bottom .container .back {
background-color: #d1ac7e;
width: 2vmin;
height: 8vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .top #top-left-3 {
width: 2vmin;
height: 14vmin;
transform: translate3d(4vmin, -10vmin, 0vmin);
}
body .scene .windmill .top #top-left-3 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .top #top-left-3 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .top #top-left-3 .container .left {
width: 2vmin;
height: 14vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-1vmin);
}
body .scene .windmill .top #top-left-3 .container .right {
width: 2vmin;
height: 14vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin);
}
body .scene .windmill .top #top-left-3 .container .top {
background-color: #e3cbaf;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(1vmin) translateZ(14vmin);
}
body .scene .windmill .top #top-left-3 .container .bottom {
background-color: #e3cbaf;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(1vmin);
}
body .scene .windmill .top #top-left-3 .container .front {
background-color: #d1ac7e;
width: 2vmin;
height: 14vmin;
transform-origin: bottom left;
transform: translateZ(1vmin);
}
body .scene .windmill .top #top-left-3 .container .back {
background-color: #d1ac7e;
width: 2vmin;
height: 14vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .top #top-left-4 {
width: 2vmin;
height: 14vmin;
transform: translate3d(4vmin, -10vmin, 2vmin);
}
body .scene .windmill .top #top-left-4 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .top #top-left-4 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .top #top-left-4 .container .left {
width: 2vmin;
height: 14vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-1vmin);
}
body .scene .windmill .top #top-left-4 .container .right {
width: 2vmin;
height: 14vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin);
}
body .scene .windmill .top #top-left-4 .container .top {
background-color: #e3cbaf;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(1vmin) translateZ(14vmin);
}
body .scene .windmill .top #top-left-4 .container .bottom {
background-color: #e3cbaf;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(1vmin);
}
body .scene .windmill .top #top-left-4 .container .front {
background-color: #d1ac7e;
width: 2vmin;
height: 14vmin;
transform-origin: bottom left;
transform: translateZ(1vmin);
}
body .scene .windmill .top #top-left-4 .container .back {
background-color: #d1ac7e;
width: 2vmin;
height: 14vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .top #top-right-1 {
width: 2vmin;
height: 16vmin;
transform: translate3d(8vmin, -8vmin, -4vmin);
}
body .scene .windmill .top #top-right-1 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .top #top-right-1 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .top #top-right-1 .container .left {
width: 2vmin;
height: 16vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-1vmin);
}
body .scene .windmill .top #top-right-1 .container .right {
width: 2vmin;
height: 16vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin);
}
body .scene .windmill .top #top-right-1 .container .top {
background-color: #e3cbaf;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(1vmin) translateZ(16vmin);
}
body .scene .windmill .top #top-right-1 .container .bottom {
background-color: #e3cbaf;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(1vmin);
}
body .scene .windmill .top #top-right-1 .container .front {
background-color: #d1ac7e;
width: 2vmin;
height: 16vmin;
transform-origin: bottom left;
transform: translateZ(1vmin);
}
body .scene .windmill .top #top-right-1 .container .back {
background-color: #d1ac7e;
width: 2vmin;
height: 16vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .top #top-right-2 {
width: 2vmin;
height: 10vmin;
transform: translate3d(8vmin, -8vmin, -2vmin);
}
body .scene .windmill .top #top-right-2 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .top #top-right-2 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .top #top-right-2 .container .left {
width: 2vmin;
height: 10vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-1vmin);
}
body .scene .windmill .top #top-right-2 .container .right {
width: 2vmin;
height: 10vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin);
}
body .scene .windmill .top #top-right-2 .container .top {
background-color: #e3cbaf;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(1vmin) translateZ(10vmin);
}
body .scene .windmill .top #top-right-2 .container .bottom {
background-color: #e3cbaf;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(1vmin);
}
body .scene .windmill .top #top-right-2 .container .front {
background-color: #d1ac7e;
width: 2vmin;
height: 10vmin;
transform-origin: bottom left;
transform: translateZ(1vmin);
}
body .scene .windmill .top #top-right-2 .container .back {
background-color: #d1ac7e;
width: 2vmin;
height: 10vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .top #top-right-3 {
width: 2vmin;
height: 16vmin;
transform: translate3d(8vmin, -8vmin, 0vmin);
}
body .scene .windmill .top #top-right-3 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .top #top-right-3 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .top #top-right-3 .container .left {
width: 2vmin;
height: 16vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-1vmin);
}
body .scene .windmill .top #top-right-3 .container .right {
width: 2vmin;
height: 16vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin);
}
body .scene .windmill .top #top-right-3 .container .top {
background-color: #e3cbaf;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(1vmin) translateZ(16vmin);
}
body .scene .windmill .top #top-right-3 .container .bottom {
background-color: #e3cbaf;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(1vmin);
}
body .scene .windmill .top #top-right-3 .container .front {
background-color: #d1ac7e;
width: 2vmin;
height: 16vmin;
transform-origin: bottom left;
transform: translateZ(1vmin);
}
body .scene .windmill .top #top-right-3 .container .back {
background-color: #d1ac7e;
width: 2vmin;
height: 16vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .top #top-right-4 {
width: 2vmin;
height: 16vmin;
transform: translate3d(8vmin, -8vmin, 2vmin);
}
body .scene .windmill .top #top-right-4 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .top #top-right-4 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .top #top-right-4 .container .left {
width: 2vmin;
height: 16vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-1vmin);
}
body .scene .windmill .top #top-right-4 .container .right {
width: 2vmin;
height: 16vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin);
}
body .scene .windmill .top #top-right-4 .container .top {
background-color: #e3cbaf;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(1vmin) translateZ(16vmin);
}
body .scene .windmill .top #top-right-4 .container .bottom {
background-color: #e3cbaf;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(1vmin);
}
body .scene .windmill .top #top-right-4 .container .front {
background-color: #d1ac7e;
width: 2vmin;
height: 16vmin;
transform-origin: bottom left;
transform: translateZ(1vmin);
}
body .scene .windmill .top #top-right-4 .container .back {
background-color: #d1ac7e;
width: 2vmin;
height: 16vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .top #top-front {
width: 2vmin;
height: 10vmin;
transform: translate3d(6vmin, -14vmin, 2vmin);
}
body .scene .windmill .top #top-front .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .top #top-front .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .top #top-front .container .left {
width: 2vmin;
height: 10vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-1vmin);
}
body .scene .windmill .top #top-front .container .right {
width: 2vmin;
height: 10vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin);
}
body .scene .windmill .top #top-front .container .top {
background-color: #e3cbaf;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(1vmin) translateZ(10vmin);
}
body .scene .windmill .top #top-front .container .bottom {
background-color: #e3cbaf;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(1vmin);
}
body .scene .windmill .top #top-front .container .front {
background-color: #d1ac7e;
width: 2vmin;
height: 10vmin;
transform-origin: bottom left;
transform: translateZ(1vmin);
}
body .scene .windmill .top #top-front .container .back {
background-color: #d1ac7e;
width: 2vmin;
height: 10vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .top #top-back {
width: 2vmin;
height: 10vmin;
transform: translate3d(6vmin, -14vmin, -4vmin);
}
body .scene .windmill .top #top-back .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .top #top-back .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .top #top-back .container .left {
width: 2vmin;
height: 10vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-1vmin);
}
body .scene .windmill .top #top-back .container .right {
width: 2vmin;
height: 10vmin;
background-color: #DCBF9C;
transform-origin: left top;
transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin);
}
body .scene .windmill .top #top-back .container .top {
background-color: #e3cbaf;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(1vmin) translateZ(10vmin);
}
body .scene .windmill .top #top-back .container .bottom {
background-color: #e3cbaf;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(1vmin);
}
body .scene .windmill .top #top-back .container .front {
background-color: #d1ac7e;
width: 2vmin;
height: 10vmin;
transform-origin: bottom left;
transform: translateZ(1vmin);
}
body .scene .windmill .top #top-back .container .back {
background-color: #d1ac7e;
width: 2vmin;
height: 10vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .top .cube .container .top {
background: #F5824B !important;
box-shadow: none;
}
body .scene .windmill .ledge .container div {
box-shadow: inset 0 0 0.5vmin #7E592488, inset 0 0 0 0.05vmin #0002;
}
body .scene .windmill .ledge #ledge {
width: 10vmin;
height: 0.5vmin;
transform: translate3d(2vmin, -17.6vmin, -3vmin);
}
body .scene .windmill .ledge #ledge .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .ledge #ledge .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .ledge #ledge .container .left {
width: 8vmin;
height: 0.5vmin;
background-color: #C8AB89;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-4vmin);
}
body .scene .windmill .ledge #ledge .container .right {
width: 8vmin;
height: 0.5vmin;
background-color: #C8AB89;
transform-origin: left top;
transform: rotateY(90deg) translateX(-4vmin) translateZ(10vmin);
}
body .scene .windmill .ledge #ledge .container .top {
background-color: #d0b79a;
width: 10vmin;
height: 8vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(4vmin) translateZ(0.5vmin);
}
body .scene .windmill .ledge #ledge .container .bottom {
background-color: #d0b79a;
width: 10vmin;
height: 8vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(4vmin);
}
body .scene .windmill .ledge #ledge .container .front {
background-color: #bb976d;
width: 10vmin;
height: 0.5vmin;
transform-origin: bottom left;
transform: translateZ(4vmin);
}
body .scene .windmill .ledge #ledge .container .back {
background-color: #bb976d;
width: 10vmin;
height: 0.5vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(4vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .ledge #ledge .container .top {
background-image: repeating-linear-gradient(to right, #0000 1vmin, #cfa776 1vmin 1.1vmin, #0000 1.1vmin 2vmin);
}
body .scene .windmill .roof #roof-left {
width: 2vmin;
height: 2vmin;
transform: translate3d(4vmin, -24vmin, -1vmin);
}
body .scene .windmill .roof #roof-left .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .roof #roof-left .container * {
position: absolute;
bottom: 0;
}
body .scene .windmill .roof #roof-left .container .side {
width: 8vmin;
height: 2vmin;
background-color: #F5824B;
transform-origin: left top;
transform: rotateY(90deg) translateX(-4vmin) translateZ(2vmin);
}
body .scene .windmill .roof #roof-left .container .top {
background-color: #f69363;
width: 2.8284271247vmin;
height: 8vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(4vmin) rotateY(-45deg);
}
body .scene .windmill .roof #roof-left .container .bottom {
background-color: #f69363;
width: 2vmin;
height: 8vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(4vmin);
}
body .scene .windmill .roof #roof-left .container .front {
background-color: #f36724;
width: 2vmin;
height: 2vmin;
clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
transform-origin: bottom left;
transform: translateZ(4vmin);
}
body .scene .windmill .roof #roof-left .container .back {
background-color: #f36724;
width: 2vmin;
height: 2vmin;
clip-path: polygon(0% 100%, 100% 100%, 0% 0%);
transform-origin: center;
transform: rotateY(180deg) translateZ(4vmin);
}
body .scene .windmill .roof #roof-left .container .top {
background-image: repeating-linear-gradient(#0000 0% 50%, #0000 50% 100%), repeating-linear-gradient(180deg, #0000 0% 50%, #f47133 50% 100%), repeating-linear-gradient(90deg, #0000 0% 50%, #e7530d 50% 100%);
background-size: 100%, 1em 1em, 1em 1em;
box-shadow: inset 0 0 1.5vmin #0008;
}
body .scene .windmill .roof #roof-left .container .back, body .scene .windmill .roof #roof-left .container .front, body .scene .windmill .roof #roof-left .container .side {
background: none;
}
body .scene .windmill .roof #roof-top {
width: 2vmin;
height: 2vmin;
transform: translate3d(6vmin, -24vmin, -1vmin);
}
body .scene .windmill .roof #roof-top .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .roof #roof-top .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .roof #roof-top .container .left {
width: 8vmin;
height: 2vmin;
background-color: #F5824B;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-4vmin);
}
body .scene .windmill .roof #roof-top .container .right {
width: 8vmin;
height: 2vmin;
background-color: #F5824B;
transform-origin: left top;
transform: rotateY(90deg) translateX(-4vmin) translateZ(2vmin);
}
body .scene .windmill .roof #roof-top .container .top {
background-color: #f69363;
width: 2vmin;
height: 8vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(4vmin) translateZ(2vmin);
}
body .scene .windmill .roof #roof-top .container .bottom {
background-color: #f69363;
width: 2vmin;
height: 8vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(4vmin);
}
body .scene .windmill .roof #roof-top .container .front {
background-color: #f36724;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: translateZ(4vmin);
}
body .scene .windmill .roof #roof-top .container .back {
background-color: #f36724;
width: 2vmin;
height: 2vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(4vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .roof #roof-top .container .top {
background-image: repeating-linear-gradient(#0000 0% 50%, #0000 50% 100%), repeating-linear-gradient(180deg, #0000 0% 50%, #f47133 50% 100%), repeating-linear-gradient(90deg, #0000 0% 50%, #e7530d 50% 100%);
background-size: 100%, 1em 1em, 1em 1em;
box-shadow: inset 0 0 0.8vmin #0008;
}
body .scene .windmill .roof #roof-top .container .back, body .scene .windmill .roof #roof-top .container .front, body .scene .windmill .roof #roof-top .container .left, body .scene .windmill .roof #roof-top .container .right {
background: none;
}
body .scene .windmill .roof #roof-top .container .back::after, body .scene .windmill .roof #roof-top .container .front::after {
position: absolute;
content: "";
width: 6vmin;
height: 2vmin;
background-color: #e7530d;
clip-path: polygon(33.36% 0%, 0% 100%, 100% 100%, 66.66% 0%);
box-shadow: inset 0 0 2vmin #0005;
}
body .scene .windmill .roof #roof-right {
width: 2vmin;
height: 2vmin;
transform: translate3d(8vmin, -24vmin, -1vmin);
}
body .scene .windmill .roof #roof-right .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .roof #roof-right .container * {
position: absolute;
bottom: 0;
}
body .scene .windmill .roof #roof-right .container .side {
width: 8vmin;
height: 2vmin;
background-color: #F5824B;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-4vmin);
}
body .scene .windmill .roof #roof-right .container .top {
background-color: #f69363;
width: 2.8284271247vmin;
height: 8vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(4vmin) translateZ(2vmin) rotateY(45deg);
}
body .scene .windmill .roof #roof-right .container .bottom {
background-color: #f69363;
width: 2vmin;
height: 8vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(4vmin);
}
body .scene .windmill .roof #roof-right .container .front {
background-color: #f36724;
width: 2vmin;
height: 2vmin;
clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
transform-origin: bottom left;
transform: translateZ(4vmin);
}
body .scene .windmill .roof #roof-right .container .back {
background-color: #f36724;
width: 2vmin;
height: 2vmin;
clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
transform-origin: center;
transform: rotateY(180deg) translateZ(4vmin);
}
body .scene .windmill .roof #roof-right .container .top {
background-image: repeating-linear-gradient(#0000 0% 50%, #0000 50% 100%), repeating-linear-gradient(180deg, #0000 0% 50%, #f47133 50% 100%), repeating-linear-gradient(90deg, #0000 0% 50%, #e7530d 50% 100%);
background-size: 100%, 1em 1em, 1em 1em;
box-shadow: inset 0 0 1.5vmin #0008;
}
body .scene .windmill .roof #roof-right .container .back, body .scene .windmill .roof #roof-right .container .front, body .scene .windmill .roof #roof-right .container .side {
background: none;
}
body .scene .windmill .fan {
width: 6vmin;
height: 6vmin;
transform: translate3d(4vmin, -20vmin, 3vmin) rotateZ(0deg);
animation: rotFan 5s linear infinite;
}
@keyframes rotFan {
to {
transform: translate3d(4vmin, -20vmin, 3vmin) rotateZ(360deg);
}
}
body .scene .windmill .fan #fan-center-axle {
width: 1vmin;
height: 1vmin;
transform: translate3d(2.5vmin, -2.5vmin, 1vmin);
}
body .scene .windmill .fan #fan-center-axle .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .fan #fan-center-axle .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .fan #fan-center-axle .container .left {
width: 3vmin;
height: 1vmin;
background-color: #BC8243;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-1.5vmin);
}
body .scene .windmill .fan #fan-center-axle .container .right {
width: 3vmin;
height: 1vmin;
background-color: #BC8243;
transform-origin: left top;
transform: rotateY(90deg) translateX(-1.5vmin) translateZ(1vmin);
}
body .scene .windmill .fan #fan-center-axle .container .top {
background-color: #c38f56;
width: 1vmin;
height: 3vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(1.5vmin) translateZ(1vmin);
}
body .scene .windmill .fan #fan-center-axle .container .bottom {
background-color: #c38f56;
width: 1vmin;
height: 3vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(1.5vmin);
}
body .scene .windmill .fan #fan-center-axle .container .front {
background-color: #9e6d38;
width: 1vmin;
height: 1vmin;
transform-origin: bottom left;
transform: translateZ(1.5vmin);
}
body .scene .windmill .fan #fan-center-axle .container .back {
background-color: #9e6d38;
width: 1vmin;
height: 1vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(1.5vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .fan #fan-center {
width: 2vmin;
height: 2vmin;
transform: translate3d(2vmin, -2vmin, 2vmin);
}
body .scene .windmill .fan #fan-center .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .fan #fan-center .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .fan #fan-center .container .left {
width: 2vmin;
height: 2vmin;
background-color: #BC8243;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-1vmin);
}
body .scene .windmill .fan #fan-center .container .right {
width: 2vmin;
height: 2vmin;
background-color: #BC8243;
transform-origin: left top;
transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin);
}
body .scene .windmill .fan #fan-center .container .top {
background-color: #c38f56;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(1vmin) translateZ(2vmin);
}
body .scene .windmill .fan #fan-center .container .bottom {
background-color: #c38f56;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(1vmin);
}
body .scene .windmill .fan #fan-center .container .front {
background-color: #9e6d38;
width: 2vmin;
height: 2vmin;
transform-origin: bottom left;
transform: translateZ(1vmin);
}
body .scene .windmill .fan #fan-center .container .back {
background-color: #9e6d38;
width: 2vmin;
height: 2vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .fan #fan-center .container .front::before {
content: "";
position: absolute;
width: 1vmin;
height: 1vmin;
background-color: transparent;
border: solid #A98C5544 0.2vmin;
}
body .scene .windmill .fan #fan-center .container .front::after {
content: "";
position: absolute;
width: 0.25vmin;
height: 0.25vmin;
background-color: transparent;
border: solid #A98C5544 0.2vmin;
}
body .scene .windmill .fan .arms .arm-1 {
width: 6vmin;
height: 6vmin;
transform: rotateZ(90deg);
}
body .scene .windmill .fan .arms .arm-1 #arm-1 {
width: 1vmin;
height: 12vmin;
transform: translate3d(2.5vmin, -3vmin, 2vmin) rotateZ(0deg);
}
body .scene .windmill .fan .arms .arm-1 #arm-1 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .fan .arms .arm-1 #arm-1 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .fan .arms .arm-1 #arm-1 .container .left {
width: 1vmin;
height: 12vmin;
background-color: #C29153;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-0.5vmin);
}
body .scene .windmill .fan .arms .arm-1 #arm-1 .container .right {
width: 1vmin;
height: 12vmin;
background-color: #C29153;
transform-origin: left top;
transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin);
}
body .scene .windmill .fan .arms .arm-1 #arm-1 .container .top {
background-color: #c99d66;
width: 1vmin;
height: 1vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(0.5vmin) translateZ(12vmin);
}
body .scene .windmill .fan .arms .arm-1 #arm-1 .container .bottom {
background-color: #c99d66;
width: 1vmin;
height: 1vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(0.5vmin);
}
body .scene .windmill .fan .arms .arm-1 #arm-1 .container .front {
background-color: #ae7d3e;
width: 1vmin;
height: 12vmin;
transform-origin: bottom left;
transform: translateZ(0.5vmin);
}
body .scene .windmill .fan .arms .arm-1 #arm-1 .container .back {
background-color: #ae7d3e;
width: 1vmin;
height: 12vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .fan .arms .arm-1 #arm-1 .container .front, body .scene .windmill .fan .arms .arm-1 #arm-1 .container .back, body .scene .windmill .fan .arms .arm-1 #arm-1 .container .left, body .scene .windmill .fan .arms .arm-1 #arm-1 .container .right {
background-image: repeating-linear-gradient(to right, #0000 20%, #957F4A88 20% 35%, #0000 35% 60%);
}
body .scene .windmill .fan .arms .arm-1 .blade {
width: 3vmin;
height: 11vmin;
transform-origin: right;
transform: translate3d(0vmin, -4vmin, 0vmin) rotateY(-10deg);
}
body .scene .windmill .fan .arms .arm-1 .blade #blade-1 {
width: 3vmin;
height: 9.5vmin;
transform: translate3d(0vmin, -1vmin, 2vmin);
}
body .scene .windmill .fan .arms .arm-1 .blade #blade-1 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .fan .arms .arm-1 .blade #blade-1 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .fan .arms .arm-1 .blade #blade-1 .container .left {
width: 0.1vmin;
height: 9.5vmin;
background-color: #EFD0AB;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-0.05vmin);
}
body .scene .windmill .fan .arms .arm-1 .blade #blade-1 .container .right {
width: 0.1vmin;
height: 9.5vmin;
background-color: #EFD0AB;
transform-origin: left top;
transform: rotateY(90deg) translateX(-0.05vmin) translateZ(3vmin);
}
body .scene .windmill .fan .arms .arm-1 .blade #blade-1 .container .top {
background-color: #f3dcc0;
width: 3vmin;
height: 0.1vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(0.05vmin) translateZ(9.5vmin);
}
body .scene .windmill .fan .arms .arm-1 .blade #blade-1 .container .bottom {
background-color: #f3dcc0;
width: 3vmin;
height: 0.1vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(0.05vmin);
}
body .scene .windmill .fan .arms .arm-1 .blade #blade-1 .container .front {
background-color: #e8bd89;
width: 3vmin;
height: 9.5vmin;
transform-origin: bottom left;
transform: translateZ(0.05vmin);
}
body .scene .windmill .fan .arms .arm-1 .blade #blade-1 .container .back {
background-color: #e8bd89;
width: 3vmin;
height: 9.5vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(0.05vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .fan .arms .arm-1 .blade #blade-1 .container div {
box-shadow: inset 0 0 0.4em #7E592488, inset 0 0 0 0.05vmin #0002;
background-image: linear-gradient(0deg, #0004 0% 10%, #0000 60% 100%), repeating-linear-gradient(180deg, #0000 0% 70%, #0001 70% 100%);
background-size: 100%, 1em 1em;
}
body .scene .windmill .fan .arms .arm-2 {
width: 6vmin;
height: 6vmin;
transform: rotateZ(180deg);
}
body .scene .windmill .fan .arms .arm-2 #arm-2 {
width: 1vmin;
height: 12vmin;
transform: translate3d(2.5vmin, -3vmin, 2vmin) rotateZ(0deg);
}
body .scene .windmill .fan .arms .arm-2 #arm-2 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .fan .arms .arm-2 #arm-2 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .fan .arms .arm-2 #arm-2 .container .left {
width: 1vmin;
height: 12vmin;
background-color: #C29153;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-0.5vmin);
}
body .scene .windmill .fan .arms .arm-2 #arm-2 .container .right {
width: 1vmin;
height: 12vmin;
background-color: #C29153;
transform-origin: left top;
transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin);
}
body .scene .windmill .fan .arms .arm-2 #arm-2 .container .top {
background-color: #c99d66;
width: 1vmin;
height: 1vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(0.5vmin) translateZ(12vmin);
}
body .scene .windmill .fan .arms .arm-2 #arm-2 .container .bottom {
background-color: #c99d66;
width: 1vmin;
height: 1vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(0.5vmin);
}
body .scene .windmill .fan .arms .arm-2 #arm-2 .container .front {
background-color: #ae7d3e;
width: 1vmin;
height: 12vmin;
transform-origin: bottom left;
transform: translateZ(0.5vmin);
}
body .scene .windmill .fan .arms .arm-2 #arm-2 .container .back {
background-color: #ae7d3e;
width: 1vmin;
height: 12vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .fan .arms .arm-2 #arm-2 .container .front, body .scene .windmill .fan .arms .arm-2 #arm-2 .container .back, body .scene .windmill .fan .arms .arm-2 #arm-2 .container .left, body .scene .windmill .fan .arms .arm-2 #arm-2 .container .right {
background-image: repeating-linear-gradient(to right, #0000 20%, #957F4A88 20% 35%, #0000 35% 60%);
}
body .scene .windmill .fan .arms .arm-2 .blade {
width: 3vmin;
height: 11vmin;
transform-origin: right;
transform: translate3d(0vmin, -4vmin, 0vmin) rotateY(-10deg);
}
body .scene .windmill .fan .arms .arm-2 .blade #blade-2 {
width: 3vmin;
height: 9.5vmin;
transform: translate3d(0vmin, -1vmin, 2vmin);
}
body .scene .windmill .fan .arms .arm-2 .blade #blade-2 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .fan .arms .arm-2 .blade #blade-2 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .fan .arms .arm-2 .blade #blade-2 .container .left {
width: 0.1vmin;
height: 9.5vmin;
background-color: #EFD0AB;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-0.05vmin);
}
body .scene .windmill .fan .arms .arm-2 .blade #blade-2 .container .right {
width: 0.1vmin;
height: 9.5vmin;
background-color: #EFD0AB;
transform-origin: left top;
transform: rotateY(90deg) translateX(-0.05vmin) translateZ(3vmin);
}
body .scene .windmill .fan .arms .arm-2 .blade #blade-2 .container .top {
background-color: #f3dcc0;
width: 3vmin;
height: 0.1vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(0.05vmin) translateZ(9.5vmin);
}
body .scene .windmill .fan .arms .arm-2 .blade #blade-2 .container .bottom {
background-color: #f3dcc0;
width: 3vmin;
height: 0.1vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(0.05vmin);
}
body .scene .windmill .fan .arms .arm-2 .blade #blade-2 .container .front {
background-color: #e8bd89;
width: 3vmin;
height: 9.5vmin;
transform-origin: bottom left;
transform: translateZ(0.05vmin);
}
body .scene .windmill .fan .arms .arm-2 .blade #blade-2 .container .back {
background-color: #e8bd89;
width: 3vmin;
height: 9.5vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(0.05vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .fan .arms .arm-2 .blade #blade-2 .container div {
box-shadow: inset 0 0 0.4em #7E592488, inset 0 0 0 0.05vmin #0002;
background-image: linear-gradient(0deg, #0004 0% 10%, #0000 60% 100%), repeating-linear-gradient(180deg, #0000 0% 70%, #0001 70% 100%);
background-size: 100%, 1em 1em;
}
body .scene .windmill .fan .arms .arm-3 {
width: 6vmin;
height: 6vmin;
transform: rotateZ(270deg);
}
body .scene .windmill .fan .arms .arm-3 #arm-3 {
width: 1vmin;
height: 12vmin;
transform: translate3d(2.5vmin, -3vmin, 2vmin) rotateZ(0deg);
}
body .scene .windmill .fan .arms .arm-3 #arm-3 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .fan .arms .arm-3 #arm-3 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .fan .arms .arm-3 #arm-3 .container .left {
width: 1vmin;
height: 12vmin;
background-color: #C29153;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-0.5vmin);
}
body .scene .windmill .fan .arms .arm-3 #arm-3 .container .right {
width: 1vmin;
height: 12vmin;
background-color: #C29153;
transform-origin: left top;
transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin);
}
body .scene .windmill .fan .arms .arm-3 #arm-3 .container .top {
background-color: #c99d66;
width: 1vmin;
height: 1vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(0.5vmin) translateZ(12vmin);
}
body .scene .windmill .fan .arms .arm-3 #arm-3 .container .bottom {
background-color: #c99d66;
width: 1vmin;
height: 1vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(0.5vmin);
}
body .scene .windmill .fan .arms .arm-3 #arm-3 .container .front {
background-color: #ae7d3e;
width: 1vmin;
height: 12vmin;
transform-origin: bottom left;
transform: translateZ(0.5vmin);
}
body .scene .windmill .fan .arms .arm-3 #arm-3 .container .back {
background-color: #ae7d3e;
width: 1vmin;
height: 12vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .fan .arms .arm-3 #arm-3 .container .front, body .scene .windmill .fan .arms .arm-3 #arm-3 .container .back, body .scene .windmill .fan .arms .arm-3 #arm-3 .container .left, body .scene .windmill .fan .arms .arm-3 #arm-3 .container .right {
background-image: repeating-linear-gradient(to right, #0000 20%, #957F4A88 20% 35%, #0000 35% 60%);
}
body .scene .windmill .fan .arms .arm-3 .blade {
width: 3vmin;
height: 11vmin;
transform-origin: right;
transform: translate3d(0vmin, -4vmin, 0vmin) rotateY(-10deg);
}
body .scene .windmill .fan .arms .arm-3 .blade #blade-3 {
width: 3vmin;
height: 9.5vmin;
transform: translate3d(0vmin, -1vmin, 2vmin);
}
body .scene .windmill .fan .arms .arm-3 .blade #blade-3 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .fan .arms .arm-3 .blade #blade-3 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .fan .arms .arm-3 .blade #blade-3 .container .left {
width: 0.1vmin;
height: 9.5vmin;
background-color: #EFD0AB;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-0.05vmin);
}
body .scene .windmill .fan .arms .arm-3 .blade #blade-3 .container .right {
width: 0.1vmin;
height: 9.5vmin;
background-color: #EFD0AB;
transform-origin: left top;
transform: rotateY(90deg) translateX(-0.05vmin) translateZ(3vmin);
}
body .scene .windmill .fan .arms .arm-3 .blade #blade-3 .container .top {
background-color: #f3dcc0;
width: 3vmin;
height: 0.1vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(0.05vmin) translateZ(9.5vmin);
}
body .scene .windmill .fan .arms .arm-3 .blade #blade-3 .container .bottom {
background-color: #f3dcc0;
width: 3vmin;
height: 0.1vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(0.05vmin);
}
body .scene .windmill .fan .arms .arm-3 .blade #blade-3 .container .front {
background-color: #e8bd89;
width: 3vmin;
height: 9.5vmin;
transform-origin: bottom left;
transform: translateZ(0.05vmin);
}
body .scene .windmill .fan .arms .arm-3 .blade #blade-3 .container .back {
background-color: #e8bd89;
width: 3vmin;
height: 9.5vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(0.05vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .fan .arms .arm-3 .blade #blade-3 .container div {
box-shadow: inset 0 0 0.4em #7E592488, inset 0 0 0 0.05vmin #0002;
background-image: linear-gradient(0deg, #0004 0% 10%, #0000 60% 100%), repeating-linear-gradient(180deg, #0000 0% 70%, #0001 70% 100%);
background-size: 100%, 1em 1em;
}
body .scene .windmill .fan .arms .arm-4 {
width: 6vmin;
height: 6vmin;
transform: rotateZ(360deg);
}
body .scene .windmill .fan .arms .arm-4 #arm-4 {
width: 1vmin;
height: 12vmin;
transform: translate3d(2.5vmin, -3vmin, 2vmin) rotateZ(0deg);
}
body .scene .windmill .fan .arms .arm-4 #arm-4 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .fan .arms .arm-4 #arm-4 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .fan .arms .arm-4 #arm-4 .container .left {
width: 1vmin;
height: 12vmin;
background-color: #C29153;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-0.5vmin);
}
body .scene .windmill .fan .arms .arm-4 #arm-4 .container .right {
width: 1vmin;
height: 12vmin;
background-color: #C29153;
transform-origin: left top;
transform: rotateY(90deg) translateX(-0.5vmin) translateZ(1vmin);
}
body .scene .windmill .fan .arms .arm-4 #arm-4 .container .top {
background-color: #c99d66;
width: 1vmin;
height: 1vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(0.5vmin) translateZ(12vmin);
}
body .scene .windmill .fan .arms .arm-4 #arm-4 .container .bottom {
background-color: #c99d66;
width: 1vmin;
height: 1vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(0.5vmin);
}
body .scene .windmill .fan .arms .arm-4 #arm-4 .container .front {
background-color: #ae7d3e;
width: 1vmin;
height: 12vmin;
transform-origin: bottom left;
transform: translateZ(0.5vmin);
}
body .scene .windmill .fan .arms .arm-4 #arm-4 .container .back {
background-color: #ae7d3e;
width: 1vmin;
height: 12vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .fan .arms .arm-4 #arm-4 .container .front, body .scene .windmill .fan .arms .arm-4 #arm-4 .container .back, body .scene .windmill .fan .arms .arm-4 #arm-4 .container .left, body .scene .windmill .fan .arms .arm-4 #arm-4 .container .right {
background-image: repeating-linear-gradient(to right, #0000 20%, #957F4A88 20% 35%, #0000 35% 60%);
}
body .scene .windmill .fan .arms .arm-4 .blade {
width: 3vmin;
height: 11vmin;
transform-origin: right;
transform: translate3d(0vmin, -4vmin, 0vmin) rotateY(-10deg);
}
body .scene .windmill .fan .arms .arm-4 .blade #blade-4 {
width: 3vmin;
height: 9.5vmin;
transform: translate3d(0vmin, -1vmin, 2vmin);
}
body .scene .windmill .fan .arms .arm-4 .blade #blade-4 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .fan .arms .arm-4 .blade #blade-4 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .fan .arms .arm-4 .blade #blade-4 .container .left {
width: 0.1vmin;
height: 9.5vmin;
background-color: #EFD0AB;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-0.05vmin);
}
body .scene .windmill .fan .arms .arm-4 .blade #blade-4 .container .right {
width: 0.1vmin;
height: 9.5vmin;
background-color: #EFD0AB;
transform-origin: left top;
transform: rotateY(90deg) translateX(-0.05vmin) translateZ(3vmin);
}
body .scene .windmill .fan .arms .arm-4 .blade #blade-4 .container .top {
background-color: #f3dcc0;
width: 3vmin;
height: 0.1vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(0.05vmin) translateZ(9.5vmin);
}
body .scene .windmill .fan .arms .arm-4 .blade #blade-4 .container .bottom {
background-color: #f3dcc0;
width: 3vmin;
height: 0.1vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(0.05vmin);
}
body .scene .windmill .fan .arms .arm-4 .blade #blade-4 .container .front {
background-color: #e8bd89;
width: 3vmin;
height: 9.5vmin;
transform-origin: bottom left;
transform: translateZ(0.05vmin);
}
body .scene .windmill .fan .arms .arm-4 .blade #blade-4 .container .back {
background-color: #e8bd89;
width: 3vmin;
height: 9.5vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(0.05vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .fan .arms .arm-4 .blade #blade-4 .container div {
box-shadow: inset 0 0 0.4em #7E592488, inset 0 0 0 0.05vmin #0002;
background-image: linear-gradient(0deg, #0004 0% 10%, #0000 60% 100%), repeating-linear-gradient(180deg, #0000 0% 70%, #0001 70% 100%);
background-size: 100%, 1em 1em;
}
body .scene .windmill .cogs #cog-1 {
width: 4vmin;
height: 4vmin;
transform: rotateX(90deg) translateZ(-2vmin) translate3d(1.8vmin, 0vmin, 7.5vmin);
animation: rotCogLB 8s linear infinite;
}
@keyframes rotCogLB {
to {
transform: rotateX(90deg) translateZ(-2vmin) translate3d(1.8vmin, 0vmin, 7.5vmin) rotateZ(360deg);
}
}
body .scene .windmill .cogs #cog-1 #cog-1-1 {
width: 0.6vmin;
height: 5vmin;
transform-origin: center center;
transform: translate3d(1.75vmin, 0.5vmin, 0vmin) rotateZ(15deg);
}
body .scene .windmill .cogs #cog-1 #cog-1-1 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .cogs #cog-1 #cog-1-1 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .cogs #cog-1 #cog-1-1 .container .left {
width: 0.8vmin;
height: 5vmin;
background-color: #385E5A;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-0.4vmin);
}
body .scene .windmill .cogs #cog-1 #cog-1-1 .container .right {
width: 0.8vmin;
height: 5vmin;
background-color: #385E5A;
transform-origin: left top;
transform: rotateY(90deg) translateX(-0.4vmin) translateZ(0.6vmin);
}
body .scene .windmill .cogs #cog-1 #cog-1-1 .container .top {
background-color: #426e69;
width: 0.6vmin;
height: 0.8vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(0.4vmin) translateZ(5vmin);
}
body .scene .windmill .cogs #cog-1 #cog-1-1 .container .bottom {
background-color: #426e69;
width: 0.6vmin;
height: 0.8vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(0.4vmin);
}
body .scene .windmill .cogs #cog-1 #cog-1-1 .container .front {
background-color: #294442;
width: 0.6vmin;
height: 5vmin;
transform-origin: bottom left;
transform: translateZ(0.4vmin);
}
body .scene .windmill .cogs #cog-1 #cog-1-1 .container .back {
background-color: #294442;
width: 0.6vmin;
height: 5vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(0.4vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .cogs #cog-1 #cog-1-2 {
width: 0.6vmin;
height: 4.3vmin;
transform-origin: center center;
transform: translate3d(1.75vmin, 0.15vmin, 0vmin) rotateZ(30deg);
}
body .scene .windmill .cogs #cog-1 #cog-1-2 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .cogs #cog-1 #cog-1-2 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .cogs #cog-1 #cog-1-2 .container .left {
width: 0.8vmin;
height: 4.3vmin;
background-color: #385E5A;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-0.4vmin);
}
body .scene .windmill .cogs #cog-1 #cog-1-2 .container .right {
width: 0.8vmin;
height: 4.3vmin;
background-color: #385E5A;
transform-origin: left top;
transform: rotateY(90deg) translateX(-0.4vmin) translateZ(0.6vmin);
}
body .scene .windmill .cogs #cog-1 #cog-1-2 .container .top {
background-color: #426e69;
width: 0.6vmin;
height: 0.8vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(0.4vmin) translateZ(4.3vmin);
}
body .scene .windmill .cogs #cog-1 #cog-1-2 .container .bottom {
background-color: #426e69;
width: 0.6vmin;
height: 0.8vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(0.4vmin);
}
body .scene .windmill .cogs #cog-1 #cog-1-2 .container .front {
background-color: #294442;
width: 0.6vmin;
height: 4.3vmin;
transform-origin: bottom left;
transform: translateZ(0.4vmin);
}
body .scene .windmill .cogs #cog-1 #cog-1-2 .container .back {
background-color: #294442;
width: 0.6vmin;
height: 4.3vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(0.4vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .cogs #cog-1 #cog-1-3 {
width: 0.6vmin;
height: 5vmin;
transform-origin: center center;
transform: translate3d(1.75vmin, 0.5vmin, 0vmin) rotateZ(45deg);
}
body .scene .windmill .cogs #cog-1 #cog-1-3 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .cogs #cog-1 #cog-1-3 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .cogs #cog-1 #cog-1-3 .container .left {
width: 0.8vmin;
height: 5vmin;
background-color: #385E5A;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-0.4vmin);
}
body .scene .windmill .cogs #cog-1 #cog-1-3 .container .right {
width: 0.8vmin;
height: 5vmin;
background-color: #385E5A;
transform-origin: left top;
transform: rotateY(90deg) translateX(-0.4vmin) translateZ(0.6vmin);
}
body .scene .windmill .cogs #cog-1 #cog-1-3 .container .top {
background-color: #426e69;
width: 0.6vmin;
height: 0.8vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(0.4vmin) translateZ(5vmin);
}
body .scene .windmill .cogs #cog-1 #cog-1-3 .container .bottom {
background-color: #426e69;
width: 0.6vmin;
height: 0.8vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateY(0.4vmin);
}
body .scene .windmill .cogs #cog-1 #cog-1-3 .container .front {
background-color: #294442;
width: 0.6vmin;
height: 5vmin;
transform-origin: bottom left;
transform: translateZ(0.4vmin);
}
body .scene .windmill .cogs #cog-1 #cog-1-3 .container .back {
background-color: #294442;
width: 0.6vmin;
height: 5vmin;
transform-origin: center;
transform: rotateY(180deg) translateZ(0.4vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .cogs #cog-1 #cog-1-4 {
width: 0.6vmin;
height: 4.3vmin;
transform-origin: center center;
transform: translate3d(1.75vmin, 0.15vmin, 0vmin) rotateZ(60deg);
}
body .scene .windmill .cogs #cog-1 #cog-1-4 .container {
position: relative;
width: 100%;
height: 100%;
}
body .scene .windmill .cogs #cog-1 #cog-1-4 .container * {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
body .scene .windmill .cogs #cog-1 #cog-1-4 .container .left {
width: 0.8vmin;
height: 4.3vmin;
background-color: #385E5A;
transform-origin: left top;
transform: rotateY(-90deg) translateX(-0.4vmin);
}
body .scene .windmill .cogs #cog-1 #cog-1-4 .container .right {
width: 0.8vmin;
height: 4.3vmin;
background-color: #385E5A;
transform-origin: left top;
transform: rotateY(90deg) translateX(-0.4vmin) translateZ(0.6vmin);
}
body .scene .windmill .cogs #cog-1 #cog-1-4 .container .top {
background-color: #426e69;
width: 0.6vmin;
height: 0.8vmin;
transform-origin: bottom left;
transform: rotateX(90deg) translateY(0.4vmin) translateZ(4.3vmin);
}
body .scene .windmill .cogs #cog-1 #cog-1-4 ..........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0