纯CSS实现的无人机（直升机）航模动画

Unmanned aerial vehicle with only css

h5, css3, fly, plane

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2613
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: #000;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    height: 100vh;
    overflow: hidden;
    display: flex;
    font-family: 'Anton', sans-serif;
    justify-content: center;
    align-items: center;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}
div {
    position: absolute;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
#porco_rosso {
    -webkit-transform: rotateY(-45deg);
    transform: rotateY(-45deg);
    -webkit-animation: rotateY 50000ms -15000ms linear infinite;
    animation: rotateY 50000ms -15000ms linear infinite;
}
.savoia {
    -webkit-transform: rotateX(110deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);
    transform: rotateX(110deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);
    -webkit-animation: roleY 10000ms -5000ms ease-in-out infinite alternate;
    animation: roleY 10000ms -5000ms ease-in-out infinite alternate;
}
.camera {
    -webkit-transform: rotateX(110deg);
    transform: rotateX(110deg);
    -webkit-animation: roleX 6000ms ease-in-out infinite alternate;
    animation: roleX 6000ms ease-in-out infinite alternate;
}
@-webkit-keyframes roleY {
    0% {
        -webkit-transform: rotateY(50deg);
        transform: rotateY(50deg);
    }
    100% {
        -webkit-transform: rotateY(-50deg);
        transform: rotateY(-50deg);
    }
}
@keyframes roleY {
    0% {
        -webkit-transform: rotateY(50deg);
        transform: rotateY(50deg);
    }
    100% {
        -webkit-transform: rotateY(-50deg);
        transform: rotateY(-50deg);
    }
}
@-webkit-keyframes roleX {
    0% {
        -webkit-transform: rotateX(110deg);
        transform: rotateX(110deg);
    }
    100% {
        -webkit-transform: rotateX(70deg);
        transform: rotateX(70deg);
    }
}
@keyframes roleX {
    0% {
        -webkit-transform: rotateX(110deg);
        transform: rotateX(110deg);
    }
    100% {
        -webkit-transform: rotateX(70deg);
        transform: rotateX(70deg);
    }
}
.body_cockpit_main {
    -webkit-transform: translateX(-35px) translateY(100px) translateZ(-111px);
    transform: translateX(-35px) translateY(100px) translateZ(-111px);
}
.body_cockpit_main_hole {
    width: 70px;
    height: 110px;
    background: #000;
    -webkit-transform: translateZ(1.1px) translateY(32px);
    transform: translateZ(1.1px) translateY(32px);
    border-radius: 999px;
}
.body_cockpit_main_window {
    width: 70px;
    height: 30px;
    background: rgba(100, 140, 255, 0.2);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: rotateX(-130deg);
    transform: rotateX(-130deg);
    border: 3px solid #dc1414;
    box-sizing: border-box;
}
.body_cockpit_main_window_left {
    width: 40px;
    height: 30px;
    background: rgba(100, 140, 255, 0.2);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: translateX(-43px) translateY(-3px) rotateY(70deg);
    transform: translateX(-43px) translateY(-3px) rotateY(70deg);
    border: 3px solid #dc1414;
    box-sizing: border-box;
}
.body_cockpit_main_window_right {
    right: 0;
    width: 40px;
    height: 30px;
    background: rgba(100, 140, 255, 0.2);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(43px) translateY(-3px) rotateY(-70deg);
    transform: translateX(43px) translateY(-3px) rotateY(-70deg);
    border: 3px solid #dc1414;
    box-sizing: border-box;
}
.body_cockpit_sub {
    -webkit-transform: translateX(-25px) translateY(-120px) translateZ(-111px);
    transform: translateX(-25px) translateY(-120px) translateZ(-111px);
}
.body_cockpit_sub_hole {
    width: 50px;
    height: 40px;
    background: #000;
    -webkit-transform: translateZ(1.1px) translateY(32px);
    transform: translateZ(1.1px) translateY(32px);
    border-radius: 0 0 999px 999px;
}
.body_cockpit_sub_window {
    width: 50px;
    height: 30px;
    background: rgba(100, 140, 255, 0.2);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: rotateX(-115deg);
    transform: rotateX(-115deg);
    border: 3px solid #dc1414;
    box-sizing: border-box;
    border-radius: 999px 999px 0 0;
}
.body_top {
    width: 120px;
    height: 700px;
    background: #dc1414;
    -webkit-transform: translateX(-50%) translateY(-150px) translateZ(-110px);
    transform: translateX(-50%) translateY(-150px) translateZ(-110px);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 300px, 50% 100%, 0 300px);
    clip-path: polygon(0 0, 100% 0, 100% 300px, 50% 100%, 0 300px);
}
.body_front {
    width: 120px;
    height: 37px;
    background: #dc1414;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(-50%) translateY(-250px) translateZ(-110px) rotateX(-91deg) translateZ(6px) translateY(33px);
    transform: translateX(-50%) translateY(-250px) translateZ(-110px) rotateX(-91deg) translateZ(6px) translateY(33px);
}
.body_front_top {
    width: 120px;
    height: 100px;
    background: #dc1414;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: translateX(-50%) translateY(-250px) translateZ(-110px) rotateX(20deg);
    transform: translateX(-50%) translateY(-250px) translateZ(-110px) rotateX(20deg);
}
.body_front_top::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 20px;
    width: 12px;
    height: 40px;
    background: #000;
    border-radius: 100%;
    -webkit-transform: translateZ(0.1px);
    transform: translateZ(0.1px);
}
.body_front_top::after {
    content: '';
    position: absolute;
    top: 30px;
    right: 20px;
    width: 12px;
    height: 40px;
    background: #000;
    border-radius: 100%;
    -webkit-transform: translateZ(0.1px);
    transform: translateZ(0.1px);
}
.body_front_bottom {
    width: 120px;
    height: 300px;
    background: #dcb464;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: translateX(-50%) translateY(-250px) translateZ(-230px) rotateX(-10deg);
    transform: translateX(-50%) translateY(-250px) translateZ(-230px) rotateX(-10deg);
}
.body_right {
    width: 120px;
    height: 400px;
    background: #dc1414;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: translateX(-50%) translateY(-250px) translateZ(-230px) rotateY(90deg);
    transform: translateX(-50%) translateY(-250px) translateZ(-230px) rotateY(90deg);
    -webkit-clip-path: polygon(0 100px, 34px 5px, 69px 5px, 120px 300px, 120px 400px, 0 400px);
    clip-path: polygon(0 100px, 34px 5px, 69px 5px, 120px 300px, 120px 400px, 0 400px);
}
.body_right_back {
    width: 120px;
    height: 400px;
    background: #dc1414;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: translateX(-50%) translateY(150px) translateZ(-110px) rotateY(-90deg) rotateX(8.5deg);
    transform: translateX(-50%) translateY(150px) translateZ(-110px) rotateY(-90deg) rotateX(8.5deg);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.body_left {
    width: 120px;
    height: 400px;
    background: #dc1414;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(-50%) translateY(-250px) translateZ(-110px) rotateY(90deg);
    transform: translateX(-50%) translateY(-250px) translateZ(-110px) rotateY(90deg);
    -webkit-clip-path: polygon(0 100px, 34px 5px, 69px 5px, 120px 300px, 120px 400px, 0 400px);
    clip-path: polygon(0 100px, 34px 5px, 69px 5px, 120px 300px, 120px 400px, 0 400px);
}
.body_left_back {
    width: 120px;
    height: 400px;
    background: #dc1414;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(-50%) translateY(150px) translateZ(-110px) rotateY(90deg) rotateX(8.5deg);
    transform: translateX(-50%) translateY(150px) translateZ(-110px) rotateY(90deg) rotateX(8.5deg);
    -webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}
.body_bottom {
    width: 120px;
    height: 100px;
    background: #dcb464;
    -webkit-transform: translateX(-50%) translateY(50px) translateZ(-230px);
    transform: translateX(-50%) translateY(50px) translateZ(-230px);
}
.body_bottom_back {
    width: 120px;
    height: 420px;
    background: #dcb464;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: translateX(-50%) translateY(130px) translateZ(-110px) rotateX(16.6deg);
    transform: translateX(-50%) translateY(130px) translateZ(-110px) rotateX(16.6deg);
    -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
}
.wing_float.left {
    -webkit-transform: translateX(-300px) translateZ(-70px);
    transform: translateX(-300px) translateZ(-70px);
}
.wing_float.right {
    -webkit-transform: translateX(300px) translateZ(-70px);
    transform: translateX(300px) translateZ(-70px);
}
.wing_float_arm {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
}
.wing_float_arm_front {
    width: 70px;
    height: 10px;
    background: #dc1414;
}
.wing_float_arm_back {
    width: 70px;
    height: 10px;
    background: #dc1414;
    -webkit-transform: translateY(80px);
    transform: translateY(80px);
}
.wing_float_box {
    -webkit-transform: translateX(-15px) translateY(-30px) translateZ(-70px);
    transform: translateX(-15px) translateY(-30px) translateZ(-70px);
}
.wing_float_box_top {
    width: 30px;
    height: 150px;
    background: #dc1414;
}
.wing_float_box_bottom {
    width: 30px;
    height: 150px;
    background: #dcb464;
    -webkit-transform: translateZ(-30px);
    transform: translateZ(-30px);
}
.wing_float_box_left {
    width: 30px;
    height: 150px;
    background: #dc1414;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
}
.wing_float_box_right {
    width: 30px;
    height: 150px;
    background: #dc1414;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
}
.wing_float_box_front {
    width: 30px;
    height: 30px;
    background: #dc1414;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
}
.wing_float_box_back {
    width: 30px;
    height: 30px;
    background: #dc1414;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotateX(-90deg) translateZ(150px);
    transform: rotateX(-90deg) translateZ(150px);
}
.wing_left {
    width: 540px;
    height: 120px;
    background: #dc1414;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: translateX(-100%) translateX(1px) translateY(-50px) skewY(-8deg) translateZ(-70px);
    transform: translateX(-100%) translateX(1px) translateY(-50px) skewY(-8deg) translateZ(-70px);
    border-radius: 100px 0 0 10px;
}
.wing_right {
    width: 540px;
    height: 120px;
    background: #dc1414;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(-1px) translateY(-50px) skewY(8deg) translateZ(-70px);
    transform: translateX(-1px) translateY(-50px) skewY(8deg) translateZ(-70px);
    border-radius: 0 100px 10px 0;
}
.wing_mount_right {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(55px) translateY(70px) translateZ(-69px) rotateZ(180deg) rotateY(80deg) scaleX(0.85);
    transform: translateX(55px) translateY(70px) translateZ(-69px) rotateZ(180deg) rotateY(80deg) scaleX(0.85);
}
.wing_mount_left {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(-55px) translateY(70px) translateZ(-69px) rotateZ(180deg) rotateY(100deg) scaleX(0.85);
    transform: translateX(-55px) translateY(70px) translateZ(-69px) rotateZ(180deg) rotateY(100deg) scaleX(0.85);
}
.wing_mount_front {
    width: 50px;
    height: 10px;
    background: #dc1414;
    -webkit-transform: translateX(0px) translateY(0px) translateZ(0px);
    transform: translateX(0px) translateY(0px) translateZ(0px);
}
.wing_mount_back {
    width: 50px;
    height: 10px;
    background: #dc1414;
    -webkit-transform: translateX(0px) translateY(100px) translateZ(0px);
    transform: translateX(0px) translateY(100px) translateZ(0px);
}
.wing_mount_arm {
    width: 108px;
    height: 6px;
    background: #dc1414;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: translateX(0px) translateY(0px) translateZ(0px) rotateZ(66.6deg);
    transform: translateX(0px) translateY(0px) translateZ(0px) rotateZ(66.6deg);
}
.tail {
    -webkit-transform: translateY(430px) translateZ(40px);
    transform: translateY(430px) translateZ(40px);
}
.tail_main {
    width: 120px;
    height: 120px;
    overflow: hidden;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
}
.tail_main_panel {
    width: 100%;
    height: 100%;
    border-radius: 100% 0 0 100%;
    background: linear-gradient(#64c864 0%, #64c864 30%, #fff 30.1%, #fff 60%, #dc1414 60.1%, #dc1414 100%);
    -webkit-transform: translateX(50%) scaleX(2);
    transform: translateX(50%) scaleX(2);
}
.tail_arm {
    -webkit-transform: translateZ(-120px) rotateY(90deg);
    transform: translateZ(-120px) rotateY(90deg);
}
.tail_arm_front {
    width: 30px;
    height: 35px;
    background: #dc1414;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: skewY(-10deg);
    transform: skewY(-10deg);
}
.tail_arm_back {
    width: 30px;
    height: 15px;
    background: #dc1414;
    -webkit-transform: translateY(58px);
    transform: translateY(58px);
}
.tail_arm_round {
    width: 35px;
    height: 45px;
    -webkit-transform: translateY(75px);
    transform: translateY(75px);
    overflow: hidden;
}
.tail_arm_round_panel {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background: #dc1414;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.tail_wing {
    -webkit-transform: translateY(50px) translateZ(-50px);
    transform: translateY(50px) translateZ(-50px);
}
.tail_wing_left {
    width: 220px;
    height: 90px;
    background: #dc1414;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: translateX(-100%) translateX(1px) translateY(-50px) skewY(-8deg) translateZ(-70px);
    transform: translateX(-100%) translateX(1px) translateY(-50px) skewY(-8deg) translateZ(-70px);
    border-radius: 100px 0 0 10px;
}
.tail_wing_right {
    width: 220px;
    height: 90px;
    background: #dc1414;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(-1px) translateY(-50px) skewY(8deg) translateZ(-70px);
    transform: translateX(-1px) translateY(-50px) skewY(8deg) translateZ(-70px);
    border-radius: 0 100px 10px 0;
}
.propeller {
    -webkit-transform: translateY(-105px);
    transform: translateY(-105px);
}
.propeller_rotate {
    -webkit-animation: rotatePropeller 600ms linear infinite;
    animation: rotatePropeller 600ms linear infinite;
}
.propeller_back {
    width: 41px;
    height: 41px;
    background: yellow;
    border-radius: 100%;
    -webkit-transform: translateY(-7px) translateX(-50%) rotateX(90deg);
    transform: translateY(-7px) translateX(-50%) rotateX(90deg);
}
.propeller_blade {
    width: 110px;
    height: 25px;
    background: #641400;
}
.propeller_blade::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #783c28;
}
.propeller_blade.o-left {
    -webkit-transform: translateY(-20px) translateX(-50%) translateX(-45px) rotateX(-45deg);
    transform: translateY(-20px) translateX(-50%) translateX(-45px) rotateX(-45deg);
    border-radius: 90% 40% 40% 90%;
}
.propeller_blade.o-left::before {
    border-radius: 90% 40% 40% 90%;
    -webkit-transform: translateZ(1px);
    transform: translateZ(1px);
}
.propeller_blade.o-right {
    -webkit-transform: translateY(-20px) translateX(-50%) translateX(45px) rotateX(45deg);
    transform: translateY(-20px) translateX(-50%) translateX(45px) rotateX(45deg);
    border-radius: 40% 90% 90% 40%;
}
.propeller_blade.o-right::before {
    border-radius: 40% 90% 90% 40%;
    -webkit-transform: translateZ(-1px);
    transform: translateZ(-1px);
}
.propeller_center_wall {
    width: 11px;
    height: 14px;
    background: yellow;
}
.propeller_center_wall.o-part_1 {
    -webkit-transform: translateX(-50%) translateZ(0) rotateY(30deg) translateZ(20px);
    transform: translateX(-50%) translateZ(0) rotateY(30deg) translateZ(20px);
}
.propeller_center_wall.o-part_2 {
    -webkit-transform: translateX(-50%) translateZ(0) rotateY(60deg) translateZ(20px);
    transform: translateX(-50%) translateZ(0) rotateY(60deg) translateZ(20px);
}
.propeller_center_wall.o-part_3 {
    -webkit-transform: translateX(-50%) translateZ(0) rotateY(90deg) translateZ(20px);
    transform: translateX(-50%) translateZ(0) rotateY(90deg) translateZ(20px);
}
.propeller_center_wall.o-part_4 {
    -webkit-transform: translateX(-50%) translateZ(0) rotateY(120deg) translateZ(20px);
    transform: translateX(-50%) translateZ(0) rotateY(120deg) translateZ(20px);
}
.propeller_center_wall.o-part_5 {
    -webkit-transform: translateX(-50%) translateZ(0) rotateY(150deg) translateZ(20px);
    transform: translateX(-50%) translateZ(0) rotateY(150deg) translateZ(20px);
}
.propeller_center_wall.o-part_6 {
    -webkit-transform: translateX(-50%) translateZ(0) rotateY(180deg) translateZ(20px);
    transform: translateX(-50%) translateZ(0) rotateY(180deg) translateZ(20px);
}
.propeller_center_wall.o-part_7 {
    -webkit-transform: translateX(-50%) translateZ(0) rotateY(210deg) translateZ(20px);
    transform: translateX(-50%) translateZ(0) rotateY(210deg) translateZ(20px);
}
.propeller_center_wall.o-part_8 {
    -webkit-transform: translateX(-50%) translateZ(0) rotateY(240deg) translateZ(20px);
    transform: translateX(-50%) translateZ(0) rotateY(240deg) translateZ(20px);
}
.propeller_center_wall.o-part_9 {
    -webkit-transform: translateX(-50%) translateZ(0) rotateY(270deg) translateZ(20px);
    transform: translateX(-50%) translateZ(0) rotateY(270deg) translateZ(20px);
}
.propeller_center_wall.o-part_10 {
    -webkit-transform: translateX(-50%) translateZ(0) rotateY(300deg) translateZ(20px);
    transform: translateX(-50%) translateZ(0) rotateY(300deg) translateZ(20px);
}
.propeller_center_wall.o-part_11 {
    -webkit-transform: translateX(-50%) translateZ(0) rotateY(330deg) translateZ(20px);
    transform: translateX(-50%) translateZ(0) rotateY(330deg) translateZ(20px);
}
.propeller_center_wall.o-part_12 {
    -webkit-transform: translateX(-50%) translateZ(0) rotateY(360deg) translateZ(20px);
    transform: translateX(-50%) translateZ(0) rotateY(360deg) translateZ(20px);
}
.propeller_front {
    -webkit-transform: translateY(-39px);
    transform: translateY(-39px);
}
.propeller_front_wall {
    width: 11px;
    height: 40px;
    background: yellow;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.propeller_front_wall.o-part_1 {
    -webkit-transform: translateX(-50%) translateZ(0) rotateY(30deg) translateZ(20px) rotateX(30deg);
    transform: translateX(-50%) translateZ(0) rotateY(30deg) translateZ(20px) rotateX(30deg);
}
.propeller_front_wall.o-part_2 {
    -webkit-transform: translateX(-50%) translateZ(0) rotateY(60deg) translateZ(20px) rotateX(30deg);
    transform: translateX(-50%) translateZ(0) rotateY(60deg) translateZ(20px) rotateX(30deg);
}
.propeller_front_wall.o-part_3 {
    -webkit-transform: translateX(-50%) translateZ(0) rotateY(90deg) translateZ(20px) rotateX(30deg);
    transform: translateX(-50%) translateZ(0) rotateY(90deg) translateZ(20px) rotateX(30deg);
}
.propeller_front_wall.o-part_4 {
    -webkit-transform: translateX(-50%) translateZ(0) rotateY(120deg) translateZ(20px) rotateX(30deg);
    transform: translateX(-50%) translateZ(0) rotateY(120deg) translateZ(20px) rotateX(30deg);
}
.propeller_front_wall.o-part_5 {
    -webkit-transform: translateX(-50%) translateZ(0) rotateY(150deg) translateZ(20px) rotateX(30deg);
    transform: translateX(-50%) translateZ(0) rotateY(150deg) translateZ(20px) rotateX(30deg);
}
.propeller_front_wall.o-part_6 {
    -webkit-transform: translateX(-50%) translateZ(0) rotateY(180deg) translateZ(20px) rotateX(30deg);
    transform: translateX(-50%) translateZ(0) rotateY(180deg) translateZ(20px) rotateX(30deg);
}
.propeller_front_wall.o-part_7 {
    -webkit-transform: translateX(-50%) translateZ(0) rotateY(210deg) translateZ(20px) rotateX(30deg);
    transform: translateX(-50%) translateZ(0) rotateY(210deg) translateZ(20px) rotateX(30deg);
}
.propeller_front_wall.o-part_8 {
    -webkit-transform: translateX(-50%) translateZ(0) rotateY(240deg) translateZ(20px) rotateX(30deg);
    transform: translateX(-50%) translateZ(0) rotateY(240deg) translateZ(20px) rotateX(30deg);
}
.propeller_front_wall.o-part_9 {
    -webkit-transform: translateX(-50%) translateZ(0) rotateY(270deg) translateZ(20px) rotateX(30deg);
    transform: translateX(-50%) translateZ(0) rotateY(270deg) translateZ(20px) rotateX(30deg);
}
.propeller_front_wall.o-part_10 {
    -webkit-transform: translateX(-50%) translateZ(0) rotateY(300deg) translateZ(20px) rotateX(30deg);
    transform: translateX(-50%) translateZ(0) rotateY(300deg) translateZ(20px) rotateX(30deg);
}
.propeller_front_wall.o-part_11 {
    -webkit-transform: translateX(-50%) translateZ(0) rotateY(330deg) translateZ(20px) rotateX(30deg);
    transform: translateX(-50%) translateZ(0) rotateY(330deg) translateZ(20px) rotateX(30deg);
}
.propeller_front_wall.o-part_12 {
    -webkit-transform: translateX(-50%) translateZ(0) rotateY(360deg) translateZ(20px) rotateX(30deg);
    transform: translateX(-50%) translateZ(0) rotateY(360deg) translateZ(20px) rotateX(30deg);
}
.engine {
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
}
.engine_system {
    -webkit-animation: vibration 100ms infinite;
    animation: vibration 100ms infinite;
}
.engine_mount_right {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(40px) translateY(60px) translateZ(-22px) rotateY(75deg);
    transform: translateX(40px) translateY(60px) translateZ(-22px) rotateY(75deg);
}
.engine_mount_left {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(-40px) translateY(60px) translateZ(-22px) rotateY(105deg);
    transform: translateX(-40px) translateY(60px) translateZ(-22px) rotateY(105deg);
}
.engine_mount_front {
    width: 50px;
    height: 10px;
    background: #dc1414;
    -webkit-transform: translateX(0px) translateY(0px) translateZ(0px);
    transform: translateX(0px) translateY(0px) translateZ(0px);
}
.engine_mount_back {
    width: 50px;
    height: 10px;
    background: #dc1414;
    -webkit-transform: translateX(0px) translateY(100px) translateZ(0px);
    transform: translateX(0px) translateY(100px) translateZ(0px);
}
.engine_mount_arm {
    width: 108px;
    height: 6px;
    background: #dc1414;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: translateX(0px) translateY(0px) translateZ(0px) rotateZ(66.6deg);
    transform: translateX(0px) translateY(0px) translateZ(0px) rotateZ(66.6deg);
}
.engine_block_wall {
    width: 30px;
    height: 100px;
    background: #323232;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.engine_block_wall.o-part_1 {
    -webkit-transform: translateX(-50%) translateY(40px) rotateY(90deg) translateZ(26px);
    transform: translateX(-50%) translateY(40px) rotateY(90deg) translateZ(26px);
}
.engine_block_wall.o-part_2 {
    -webkit-transform: translateX(-50%) translateY(40px) rotateY(150deg) translateZ(26px);
    transform: translateX(-50%) translateY(40px) rotateY(150deg) translateZ(26px);
}
.engine_block_wall.o-part_3 {
    -webkit-transform: translateX(-50%) translateY(40px) rotateY(210deg) translateZ(26px);
    transform: translateX(-50%) translateY(40px) rotateY(210deg) translateZ(26px);
}
.engine_block_wall.o-part_4 {
    -webkit-transform: translateX(-50%) translateY(40px) rotateY(270deg) translateZ(26px);
    transform: translateX(-50%) translateY(40px) rotateY(270deg) translateZ(26px);
}
.engine_block_wall.o-part_5 {
    -webkit-transform: translateX(-50%) translateY(40px) rotateY(330deg) translateZ(26px);
    transform: translateX(-50%) translateY(40px) rotateY(330deg) translateZ(26px);
}
.engine_block_wall.o-part_6 {
    -webkit-transform: translateX(-50%) translateY(40px) rotateY(390deg) translateZ(26px);
    transform: translateX(-50%) translateY(40px) rotateY(390deg) translateZ(26px);
}
.engine_block_front {
    width: 30px;
    height: 40px;
    background: #323232;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.engine_block_front.o-part_1 {
    -webkit-transform: translateX(-50%) translateY(0px) rotateY(90deg) translateZ(26px) rotateX(41deg);
    transform: translateX(-50%) translateY(0px) rotateY(90deg) translateZ(26px) rotateX(41deg);
}
.engine_block_front.o-part_2 {
    -webkit-transform: translateX(-50%) translateY(0px) rotateY(150deg) translateZ(26px) rotateX(41deg);
    transform: translateX(-50%) translateY(0px) rotateY(150deg) translateZ(26px) rotateX(41deg);
}
.engine_block_front.o-part_3 {
    -webkit-transform: translateX(-50%) translateY(0px) rotateY(210deg) translateZ(26px) rotateX(41deg);
    transform: translateX(-50%) translateY(0px) rotateY(210deg) translateZ(26px) rotateX(41deg);
}
.engine_block_front.o-part_4 {
    -webkit-transform: translateX(-50%) translateY(0px) rotateY(270deg) translateZ(26px) rotateX(41deg);
    transform: translateX(-50%) translateY(0px) rotateY(270deg) translateZ(26px) rotateX(41deg);
}
.engine_block_front.o-part_5 {
    -webkit-transform: translateX(-50%) translateY(0px) rotateY(330deg) translateZ(26px) rotateX(41deg);
    transform: translateX(-50%) translateY(0px) rotateY(330deg) translateZ(26px) rotateX(41deg);
}
.engine_block_front.o-part_6 {
    -webkit-transform: translateX(-50%) translateY(0px) rotateY(390deg) translateZ(26px) rotateX(41deg);
    transform: translateX(-50%) translateY(0px) rotateY(390deg) translateZ(26px) rotateX(41deg);
}
.engine_block_back {
    width: 52px;
    height: 52px;
    background: #323232;
    -webkit-transform: translateX(-50%) rotateX(-90deg) translateZ(114px) scaleY(1.2);
    transform: translateX(-50%) rotateX(-90deg) translateZ(114px) scaleY(1.2);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-clip-path: polygon(0% 75%, 0% 25%, 50% 2%, 100% 25%, 100% 75%, 50% 98%);
    clip-path: polygon(0% 75%, 0% 25%, 50% 2%, 100% 25%, 100% 75%, 50% 98%);
}
.engine_head_logo {
    position: static;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    background: none;
    color: #fff;
    -webkit-transform: translateZ(2px);
    transform: translateZ(2px);
    text-shadow: -1px 0 0 #969696;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.engine_head_logo.o-right {
    -webkit-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
}
.engine_head_top {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 100px;
    background: #c8c8c8;
    -webkit-transform: translateX(-50%) translateZ(40px);
    transform: translateX(-50%) translateZ(40px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.engine_head_left {
    width: 40px;
    height: 100px;
    background: #323232;
    -webkit-transform: translateX(-50%) rotateY(-90deg) translateZ(15px) translateX(20px);
    transform: translateX(-50%) rotateY(-90deg) translateZ(15px) translateX(20px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.engine_head_right {
    width: 40px;
    height: 100px;
    background: #323232;
    -webkit-transform: translateX(-50%) rotateY(90deg) translateZ(15px) translateX(-20px);
    transform: translateX(-50%) rotateY(90deg) translateZ(15px) translateX(-20px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.engine_head_back {
    width: 30px;
    height: 40px;
    background: #323232;
    -webkit-transform: translateX(-50%) rotateX(-90deg) translateZ(80px) translateY(-20px);
    transform: translateX(-50%) rotateX(-90deg) translateZ(80px) translateY(-20px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.engine_head_front {
    width: 30px;
    height: 40px;
    background: #323232;
    -webkit-transform: translateX(-50%) rotateX(90deg) translateZ(20px) translateY(20px);
    transform: translateX(-50%) rotateX(90deg) translateZ(20px) translateY(20px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.engine_head.o-left {
    -webkit-transform: translateY(40px) rotateY(-30deg) translateZ(26px);
    transform: translateY(40px) rotateY(-30deg) translateZ(26px);
}
.engine_head.o-right {
    -webkit-transform: translateY(40px) rotateY(30deg) translateZ(26px);
    transform: translateY(40px) rotateY(30deg) translateZ(26px);
}
.engine_intake_duct {
    -webkit-transform: scale3d(1, 1, 0.6) translateZ(35px);
    transform: scale3d(1, 1, 0.6) translateZ(35px);
}
.engine_intake_duct_wall {
    width: 14px;
    height: 10px;
    background: #aa6428;
}
.engine_intake_duct_wall.o-part_1 {
    -webkit-transform: translateX(-50%) translateY(35px) translateZ(48px) rotateY(90deg) translateZ(7px);
    transform: translateX(-50%) translateY(35px) translateZ(48px) rotateY(90deg) translateZ(7px);
}
.engine_intake_duct_wall.o-part_2 {
    -webkit-transform: translateX(-50%) translateY(35px) translateZ(48px) rotateY(180deg) translateZ(7px);
    transform: translateX(-50%) translateY(35px) translateZ(48px) rotateY(180deg) translateZ(7px);
}
.engine_intake_duct_wall.o-part_3 {
    -webkit-transform: translateX(-50%) translateY(35px) translateZ(48px) rotateY(270deg) translateZ(7px);
    transform: translateX(-50%) translateY(35px) translateZ(48px) rotateY(270deg) translateZ(7px);
}
.engine_intake_duct_wall.o-part_4 {
    -webkit-transform: translateX(-50%) translateY(35px) translateZ(48px) rotateY(360deg) translateZ(7px);
    transform: translateX(-50%) translateY(35px) translateZ(48px) rotateY(360deg) translateZ(7px);
}
.engine_intake_duct_hole {
    width: 14px;
    height: 14px;
    background: #000;
    -webkit-transform: translateX(-50%) translateY(38px) translateZ(48px) rotateX(90deg);
    transform: translateX(-50%) translateY(38px) translateZ(48px) rotateX(90deg);
}
.engine_intake_top {
    width: 30px;
    height: 85px;
    background: #323232;
    -webkit-transform: translateX(-50%) translateY(45px) translateZ(55px);
    transform: translateX(-50%) translateY(45px) translateZ(55px);
}
.engine_intake_back {
    width: 30px;
    height: 30px;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    background: #323232;
    -webkit-transform: translateX(-50%) translateZ(55px) translateY(130px) rotateX(-70deg);
    transform: translateX(-50%) translateZ(55px) translateY(130px) rotateX(-70deg);
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 90%);
    clip-path: polygon(0% 0%, 100% 0%, 50% 90%);
}
.engine_intake_front {
    width: 30px;
    height: 30px;
    background: #323232;
    -webkit-transform: translateX(-50%) translateZ(55px) rotateX(90deg) translateZ(-30px) rotateZ(180deg) translateY(15px);
    transform: translateX(-50%) translateZ(55px) rotateX(90deg) translateZ(-30px) rotateZ(180deg) translateY(15px);
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 82%);
    clip-path: polygon(0% 0%, 100% 0%, 50% 82%);
}
.engine_exhaust.o-left {
    -webkit-transform: translateX(-95px) translateZ(5px) rotateY(60deg);
    transform: translateX(-95px) translateZ(5px) rotateY(60deg);
}
.engine_exhaust.o-right {
    -webkit-transform: translateX(95px) translateZ(5px) rotateY(-60deg);
    transform: translateX(95px) translateZ(5px) rotateY(-60deg);
}
.engine_exhaust_center {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
}
.engine_exhaust_center_front {
    width: 12px;
    height: 12px;
    background: #aa6428;
    -webkit-transform: translateX(-6px) translateY(51px) translateZ(42px) rotateX(90deg);
    transform: translateX(-6px) translateY(51px) translateZ(42px) rotateX(90deg);
    border-radius: 100%;
}
.engine_exhaust_center_wall {
    width: 5px;
    height: 150px;
    background: #aa6428;
}
.engine_exhaust_center_wall.o-part_1 {
    -webkit-transform: translateX(-50%) translateY(57px) translateZ(42px) rotateY(67.5deg) translateZ(5.5px);
    transform: translateX(-50%) translateY(57px) translateZ(42px) rotateY(67.5deg) translateZ(5.5px);
}
.engine_exhaust_center_wall.o-part_2 {
    -webkit-transform: translateX(-50%) translateY(57px) translateZ(42px) rotateY(112.5deg) translateZ(5.5px);
    transform: translateX(-50%) translateY(57px) translateZ(42px) rotateY(112.5deg) translateZ(5.5px);
}
.engine_exhaust_center_wall.o-part_3 {
    -webkit-transform: translateX(-50%) translateY(57px) translateZ(42px) rotateY(157.5deg) translateZ(5.5px);
    transform: translateX(-50%) translateY(57px) translateZ(42px) rotateY(157.5deg) translateZ(5.5px);
}
.engine_exhaust_center_wall.o-part_4 {
    -webkit-transform: translateX(-50%) translateY(57px) translateZ(42px) rotateY(202.5deg) translateZ(5.5px);
    transform: translateX(-50%) translateY(57px) translateZ(42px) rotateY(202.5deg) translateZ(5.5px);
}
.engine_exhaust_center_wall.o-part_5 {
    -webkit-transform: translateX(-50%) translateY(57px) translateZ(42px) rotateY(247.5deg) translateZ(5.5px);
    transform: translateX(-50%) translateY(57px) translateZ(42px) rotateY(247.5deg) translateZ(5.5px);
}
.engine_exhaust_center_wall.o-part_6 {
    -webkit-transform: translateX(-50%) translateY(57px) translateZ(42px) rotateY(292.5deg) translateZ(5.5px);
    transform: translateX(-50%) translateY(57px) translateZ(42px) rotateY(292.5deg) translateZ(5.5px);
}
.engine_exhaust_center_wall.o-part_7 {
    -webkit-transform: translateX(-50%) translateY(57px) translateZ(42px) rotateY(337.5deg) translateZ(5.5px);
    transform: translateX(-50%) translateY(57px) translateZ(42px) rotateY(337.5deg) translateZ(5.5px);
}
.engine_exhaust_center_wall.o-part_8 {
    -webkit-transform: translateX(-50%) translateY(57px) translateZ(42px) rotateY(382.5deg) translateZ(5.5px);
    transform: translateX(-50%) translateY(57px) translateZ(42px) rotateY(382.5deg) translateZ(5.5px);
}
.engine_exhaust_center_wall::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #0a0000;
    -webkit-transform: translateZ(-1px);
    transform: translateZ(-1px);
}
.engine_exhaust_cylinder.o-part_1 {
    -webkit-transform: rotateX(110deg) translateZ(-95px) translateY(-45px);
    transform: rotateX(110deg) translateZ(-95px) translateY(-45px);
}
.engine_exhaust_cylinder.o-part_2 {
    -webkit-transform: rotateX(110deg) translateZ(-110px) translateY(-50px);
    transform: rotateX(110deg) translateZ(-110px) translateY(-50px);
}
.engine_exhaust_cylinder.o-part_3 {
    -webkit-transform: rotateX(110deg) translateZ(-125px) translateY(-55px);
    transform: rotateX(110deg) translateZ(-125px) translateY(-55px);
}
.engine_exhaust_cylinder.o-part_4 {
    -webkit-transform: rotateX(110deg) translateZ(-140px) translateY(-60px);
    transform: rotateX(110deg) translateZ(-140px) translateY(-60px);
}
.engine_exhaust_cylinder.o-part_5 {
    -webkit-transform: rotateX(110deg) translateZ(-155px) translateY(-65px);
    transform: rotateX(110deg) translateZ(-155px) translateY(-65px);
}
.engine_exhaust_cylinder.o-part_6 {
    -webkit-transform: rotateX(110deg) translateZ(-170px) translateY(-70px);
    transform: rotateX(110deg) translateZ(-170px) translateY(-70px);
}
.engine_exhaust_cylinder_wall {
    width: 4px;
    height: 30px;
    background: #aa6428;
}
.engine_exhaust_cylinder_wall.o-part_1 {
    -webkit-transform: translateX(-50%) translateY(61px) translateZ(27px) rotateY(67.5deg) translateZ(4px);
    transform: translateX(-50%) translateY(61px) translateZ(27px) rotateY(67.5deg) translateZ(4px);
}
.engine_exhaust_cylinder_wall.o-part_2 {
    -webkit-transform: translateX(-50%) translateY(61px) translateZ(27px) rotateY(112.5deg) translateZ(4px);
    transform: translateX(-50%) translateY(61px) translateZ(27px) rotateY(112.5deg) translateZ(4px);
}
.engine_exhaust_cylinder_wall.o-part_3 {
    -webkit-transform: translateX(-50%) translateY(61px) translateZ(27px) rotateY(157.5deg) translateZ(4px);
    transform: translateX(-50%) translateY(61px) translateZ(27px) rotateY(157.5deg) translateZ(4px);
}
.engine_exhaust_cylinder_wall.o-part_4 {
    -webkit-transform: translateX(-50%) translateY(61px) translateZ(27px) rotateY(202.5deg) translateZ(4px);
    transform: translateX(-50%) translateY(61px) translateZ(27px) rotateY(202.5deg) translateZ(4px);
}
.engine_exhaust_cylinder_wall.o-part_5 {
    -webkit-transform: translateX(-50%) translateY(61px) translateZ(27px) rotateY(247.5deg) translateZ(4px);
    transform: translateX(-50%) translateY(61px) translateZ(27px) rotateY(247.5deg) translateZ(4px);
}
.engine_exhaust_cylinder_wall.o-part_6 {
    -webkit-transform: translateX(-50%) translateY(61px) translateZ(27px) rotateY(292.5deg) translateZ(4px);
    transform: translateX(-50%) translateY(61px) translateZ(27px) rotateY(292.5deg) translateZ(4px);
}
.engine_exhaust_cylinder_wall.o-part_7 {
    -webkit-transform: translateX(-50%) translateY(61px) translateZ(27px) rotateY(337.5deg) translateZ(4px);
    transform: translateX(-50%) translateY(61px) translateZ(27px) rotateY(337.5deg) translateZ(4px);
}
.engine_exhaust_cylinder_wall.o-part_8 {
    -webkit-transform: translateX(-50%) translateY(61px) translateZ(27px) rotateY(382.5deg) translateZ(4px);
    transform: translateX(-50%) translateY(61px) translateZ(27px) rotateY(382.5deg) translateZ(4px);
}
.engine_alternator_wall {
    width: 30px;
    height: 25px;
    background: #323232;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.engine_alternator_wall.o-part_1 {
    -webkit-transform: translateX(-50%) translateY(140px) rotateY(90deg) translateZ(15px);
    transform: translateX(-50%) translateY(140px) rotateY(90deg) translateZ(15px);
}
.engine_alternator_wall.o-part_2 {
    -webkit-transform: translateX(-50%) translateY(140px) rotateY(180deg) translateZ(15px);
    transform: translateX(-50%) translateY(140px) rotateY(180deg) translateZ(15px);
}
.engine_alternator_wall.o-part_3 {
    -webkit-transform: translateX(-50%) translateY(140px) rotateY(270deg) translateZ(15px);
    transform: translateX(-50%) translateY(140px) rotateY(270deg) translateZ(15px);
}
.engine_alternator_wall.o-part_4 {
    -webkit-transform: translateX(-50%) translateY(140px) rotateY(360deg) translateZ(15px);
    transform: translateX(-50%) translateY(140px) rotateY(360deg) translateZ(15px);
}
.engine_alternator_back {
    display: relative;
    width: 30px;
    height: 30px;
    background: #323232;
    -webkit-transform: translateX(-50%) translateY(150px) rotateX(-90deg);
    transform: translateX(-50%) translateY(150px) rotateX(-90deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.engine_alternator_back::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #000;
    border-radius: 100%;
    -webkit-transform: translate(5px, 5px);
    transform: translate(5px, 5px);
}
.engine_shuft {
    -webkit-animation: rotateY 600ms linear infinite;
    animation: rotateY 600ms linear infinite;
}
.engine_shuft_gear {
    width: 20px;
    height: 30px;
    background: #323232;
}
.engine_shuft_gear.o-part_1 {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.engine_shuft_gear.o-part_2 {
    -webkit-transform: translateX(-50%) rotateY(90deg);
    transform: translateX(-50%) rotateY(90deg);
}
.engine_cover_radiator {
    -webkit-transform: translateY(-10px) translateZ(15px);
    transform: translateY(-10px) translateZ(15px);
}
.engine_cover_radiator_bottom {
    width: 22px;
    height: 40px;
    background: #dc1414;
    -webkit-transform: translateX(-50%) translateY(30px) translateZ(-80px);
    transform: translateX(-50%) translateY(30px) translateZ(-80px);
}
.engine_cover_radiator_bottom_left {
    width: 13px;
    height: 40px;
    background: #dc1414;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: translateX(-100%) rotateY(45deg);
    transform: translateX(-100%) rotateY(45deg);
}
.engine_cover_radiator_bottom_right {
    width: 13px;
    height: 40px;
    background: #dc1414;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(22px) rotateY(-45deg);
    transform: translateX(22px) rotateY(-45deg);
}
.engine_cover_radiator_front {
    width: 40px;
    height: 46px;
    background: #c8c8c8;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: translateX(-50%) translateY(-5px) translateZ(-80px) rotateX(-90deg);
    transform: translateX(-50%) translateY(-5px) translateZ(-80px) rotateX(-90deg);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 37px, 31px 100%, 9px 100%, 0% 37px);
    clip-path: polygon(0 0, 100% 0, 100% 37px, 31px 100%, 9px 100%, 0% 37px);
}
.engine_cover_radiator_back {
    width: 40px;
    height: 46px;
    background: #c8c8c8;
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: translateX(-50%) translateY(10px) translateZ(-80px) rotateX(-90deg);
    transform: translateX(-50%) translateY(10px) translateZ(-80px) rotateX(-90deg);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 37px, 31px 100%, 9px 100%, 0% 37px);
    clip-path: polygon(0 0, 100% 0, 100% 37px, 31px 100%, 9px 100%, 0% 37px);
}
.engine_cover_radiator_left {
    width: 40px;
    height: 36px;
    background: #dc1414;
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: translateX(-50%) translateY(34px) translateZ(-71px) rotateX(-90deg) rotateY(90deg);
    transform: translateX(-50%) translateY(34px) translateZ(-71px) rotateX(-90deg) rotateY(90deg);
}
.engine_cover_radiator_right {
    width: 40px;
    height: 36px;
    background: #dc1414;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: translateX(-50%) translateY(34px) translateZ(-71px) rotateX(-90deg) rotateY(-90deg);
    transform: translateX(-50%) translateY(34px) translateZ(-71px) rotateX(-90deg) rotateY(-90deg);
}
.engine_cover_front_top {
    width: 104px;
    height: 78px;
    background: #dc1414;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: translateX(-50%) translateY(10px) translateZ(-0.5px) rotateX(70deg);
    transform: translateX(-50%) translateY(10px) translateZ(-0.5px) rotateX(70deg);
    -webkit-clip-path: polygon(7px 0, 39px 0, 44px 15px, 61px 15px, 65px 0, 97px 0, 100px 25px, 100px 45px, 103px 52px, 101px 62px, 76px 78px, 65px 75px, 60px 65px, 44px 65px, 39px 75px, 28px 78px, 3px 62px, 1px 52px, 4px 45px, 4px 25px);
    clip-path: polygon(7px 0, 39px 0, 44px 15px, 61px 15px, 65px 0, 97px 0, 100px 25px, 100px 45px, 103px 52px, 101px 62px, 76px 78px, 65px 75px, 60px 65px, 44px 65px, 39px 75px, 28px 78px, 3px 62px, 1px 52px, 4px 45px, 4px 25px);
}
.engine_cover_front_bottom {
    width: 96px;
    height: 41px;
    background: #dc1414;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: translateX(-50%) translateY(10px) rotateY(180deg) rotateX(60deg);
    transform: translateX(-50%) translateY(10px) rotateY(180deg) rotateX(60deg);
    -webkit-clip-path: polygon(3px 0, 35px 0, 40px 15px, 57px 15px, 61px 0, 93px 0, 89px 26px, 67px 41px, 29px 41px, 7px 26px);
    clip-path: polygon(3px 0, 35px 0, 40px 15px, 57px 15px, 61px 0, 93px 0, 89px 26px, 67px 41px, 29px 41px, 7px 26px);
}
.engine_cover_top {
    width: 16px;
    height: 122px;
    background: #dc1414;
    -webkit-transform: translateX(-50%) translateY(32px) translateZ(60px);
    transform: translateX(-50%) translateY(32px) translateZ(60px);
}
.engine_cover_bottom {
    width: 40px;
    height: 120px;
    background: #dc1414;
    -webkit-transform: translateX(-50%) translateY(29.5px) translateZ(-35px);
    transform: translateX(-50%) translateY(29.5px) translateZ(-35px);
}
.engine_cover_bottom_left {
    width: 25px;
    height: 146px;
    background: #dc1414;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: translateX(-100%) translateY(-7px) rotateY(30deg);
    transform: translateX(-100%) translateY(-7px) rotateY(30deg);
    -webkit-clip-path: polygon(0 0, 100% 7px, 100% 127px, 0% 100%);
    clip-path: polygon(0 0, 100% 7px, 100% 127px, 0% 100%);
}
.engine_cover_bottom_right {
    width: 25px;
    height: 146px;
    background: #dc1414;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(40px) translateY(-7px) rotateY(-30deg);
    transform: translateX(40px) translateY(-7px) rotateY(-30deg);
    -webkit-clip-path: polygon(0 7px, 100% 0, 100% 100%, 0% 127px);
    clip-path: polygon(0 7px, 100% 0, 100% 100%, 0% 127px);
}
.engine_cover_back_top {
    width: 104px;
    height: 96px;
    background: #dc1414;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: translateX(-50%) translateY(107px) rotateX(-50deg);
    transform: translateX(-50%) translateY(107px) rotateX(-50deg);
    -webkit-clip-path: polygon(100px 69px, 97px 96px, 7px 96px, 4px 69px, 5px 44px, 0 33px, 3px 20px, 29px 1px, 38px 4px, 44px 18px, 60px 18px, 66px 4px, 75px 1px, 101px 20px, 104px 33px, 99px 44px);
    clip-path: polygon(100px 69px, 97px 96px, 7px 96px, 4px 69px, 5px 44px, 0 33px, 3px 20px, 29px 1px, 38px 4px, 44px 18px, 60px 18px, 66px 4px, 75px 1px, 101px 20px, 104px 33px, 99px 44px);
}
.engine_cover_back_bottom {
    width: 96px;
    height: 65px;
    background: #dc1414;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: translateX(-50%) translateY(138px) rotateY(180deg) rotateX(-33deg);
    transform: translateX(-50%) translateY(138px) rotateY(180deg) rotateX(-33deg);
    -webkit-clip-path: polygon(28px 1px, 68px 1px, 90px 24px, 93px 100%, 3px 100%, 6px 24px);
    clip-path: polygon(28px 1px, 68px 1px, 90px 24px, 93px 100%, 3px 100%, 6px 24px);
}
.engine_cover_left {
    width: 45px;
    height: 193px;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: translateX(-50%) translateX(-64px) translateZ(-23px) translateY(10px) rotateY(82deg);
    transform: translateX(-50%) translateX(-64px) translateZ(-23px) translateY(10px) rotateY(82deg);
}
.engine_cover_left_hood {
    top: 20px;
    width: 100%;
    height: 120px;
    background: #dc1414;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-animation: hood 3000ms ease-in-out infinite alternate;
    animation: hood 3000ms ease-in-out infinite alternate;
}
.engine_cover_left_front {
    width: 100%;
    height: 20px;
    background: #dc1414;
    -webkit-clip-path: polygon(0 7px, 22px 0, 100% 12px, 100% 100%, 0% 100%);
    clip-path: polygon(0 7px, 22px 0, 100% 12px, 100% 100%, 0% 100%);
}
.engine_cover_left_back {
    width: 100%;
    height: 53px;
    background: #dc1414;
    -webkit-transform: translateY(140px);
    transform: translateY(140px);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 18px, 22px 100%, 0% 35px);
    clip-path: polygon(0 0, 100% 0, 100% 18px, 22px 100%, 0% 35px);
}
.engine_cover_right {
    width: 45px;
    height: 193px;
    background: #dc1414;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(-50%) translateX(64px) translateZ(-23px) translateY(10px) rotateY(-82deg);
    transform: translateX(-50%) translateX(64px) translateZ(-23px) translateY(10px) rotateY(-82deg);
    -webkit-clip-path: polygon(0 12px, 22px 0, 100% 7px, 100% 176px, 23px 100%, 0% 158px);
    clip-path: polygon(0 12px, 22px 0, 100% 7px, 100% 176px, 23px 100%, 0% 158px);
}
.engine_cover_head.o-left {
    -webkit-transform: translateX(-18px) translateY(25px) translateZ(54px) rotateY(-30deg);
    transform: translateX(-18px) translateY(25px) translateZ(54px) rotateY(-30deg);
}
.engine_cover_head.o-right {
    -webkit-transform: scaleX(-1) translateX(-18px) translateY(25px) translateZ(54px) rotateY(-30deg);
    transform: scaleX(-1) translateX(-18px) translateY(25px) translateZ(54px) rotateY(-30deg);
}
.engine_cover_head_panel {
    width: 100%;
    height: 100%;
    background: #dc1414;
}
.engine_cover_head_panel.o-hood {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    -webkit-clip-path: polygon(0 10px, 100% 10px, 100% 110px, 0 110px);
    clip-path: polygon(0 10px, 100% 10px, 100% 110px, 0 110px);
}
.engine_cover_head_1 {
    width: 12px;
    height: 123px;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
}
.engine_cover_head_1_panel {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
    -webkit-clip-path: polygon(0 4px, 100% 0, 100% 100%, 0 114px);
    clip-path: polygon(0 4px, 100% 0, 100% 100%, 0 114px);
}
.o-left .engine_cover_head_1_panel:not(.o-hood) {
    -webkit-clip-path: polygon(0 4px, 100% 0, 100% 9px, 0 9px, 0 109px, 100% 109px, 100% 100%, 0 114px);
    clip-path: polygon(0 4px, 100% 0, 100% 9px, 0 9px, 0 109px, 100% 109px, 100% 100%, 0 114px);
}
.engine_cover_head_1.o-hood {
    -webkit-animation: headHood 3000ms ease-in-out infinite alternate;
    animation: headHood 3000ms ease-in-out infinite alternate;
}
.engine_cover_head_2 {
    width: 10px;
    height: 110px;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: translateX(-100%) rotateY(-45deg);
    transform: translateX(-100%) rotateY(-45deg);
}
.engine_cover_head_2_panel {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-clip-path: polygon(0 1px, 100% 0, 100% 100%, 0 108px);
    clip-path: polygon(0 1px, 100% 0, 100% 100%, 0 108px);
}
.o-left .engine_cover_head_2_panel:not(.o-hood) {
    -webkit-clip-path: polygon(0 1px, 100% 0, 100% 5px, 0 5px, 0 105px, 100% 105px, 100% 100%, 0 108px);
    clip-path: polygon(0 1px, 100% 0, 100% 5px, 0 5px, 0 105px, 100% 105px, 100% 100%, 0 108px);
}
.engine_cover_head_3 {
    width: 30px;
    height: 125px;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: translateX(-100%) rotateY(-45deg);
    transform: translateX(-100%) rotateY(-45deg);
}
.engine_cover_head_3_panel {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    -webkit-clip-path: polygon(0 0, 100% 6px, 100% 113px, 0 100%);
    clip-path: polygon(0 0, 100% 6px, 100% 113px, 0 100%);
}
.o-left .engine_cover_head_3_panel:not(.o-hood) {
    -webkit-clip-path: polygon(0 0, 100% 6px, 100% 10px, 0 10px, 0 110px, 100% 110px, 100% 113px, 0 100%);
    clip-path: polygon(0 0, 100% 6px, 100% 10px, 0 10px, 0 110px, 100% 110px, 100% 113px, 0 100%);
}
.engine_cover_head_4 {
    width: 10px;
    height: 136px;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: translateX(-100%) rotateY(-45deg);
    transform: translateX(-100%) rotateY(-45deg);
}
.engine_cover_head_4_panel {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    -webkit-clip-path: polygon(0 0, 100% 3px, 100% 128px, 0 100%);
    clip-path: polygon(0 0, 100% 3px, 100% 128px, 0 100%);
}
.o-left .engine_cover_head_4_panel:not(.o-hood) {
    -webkit-clip-path: polygon(0 0, 100% 3px, 100% 13px, 0 13px, 0 113px, 100% 113px, 100% 128px, 0 100%);
    clip-path: polygon(0 0, 100% 3px, 100% 13px, 0 13px, 0 113px, 100% 113px, 100% 128px, 0 100%);
}
.engine_cover_head_5 {
    width: 10px;
    height: 145px;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: translateX(-100%) rotateY(-45deg);
    transform: translateX(-100%) rotateY(-45deg);
}
.engine_cover_head_5_panel {
    -webkit-clip-path: polygon(0 0, 100% 2px, 100% 138px, 0 100%);
    clip-path: polygon(0 0, 100% 2px, 100% 138px, 0 100%);
}
.o-left .engine_cover_head_5_panel:not(.o-hood) {
    -webkit-clip-path: polygon(0 0, 100% 2px, 100% 15px, 0 15px, 0 115px, 100% 115px, 100% 138px, 0 100%);
    clip-path: polygon(0 0, 100% 2px, 100% 15px, 0 15px, 0 115px, 100% 115px, 100% 138px, 0 100%);
}
@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotateX(0deg) rotateY(0deg);
        transform: rotateX(0deg) rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateX(360deg) rotateY(1080deg);
        transform: rotateX(360deg) rotateY(1080deg);
    }
}
@keyframes rotate {
    0% {
        -webkit-transform: rotateX(0deg) rotateY(0deg);
        transform: rotateX(0deg) rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateX(360deg) rotateY(1080deg);
        transform: rotateX(360deg) rotateY(1080deg);
    }
}
@-webkit-keyframes rotateY {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}
@keyframes rotateY {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}
@-webkit-keyframes hood {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    50% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    80% {
        -webkit-transform: rotateY(-100deg);
        transform: rotateY(-100deg);
    }
    100% {
        -webkit-transform: rotateY(-100deg);
        transform: rotateY(-100deg);
    }
}
@keyframes hood {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    50% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    80% {
        -webkit-transform: rotateY(-100deg);
        transform: rotateY(-100deg);
    }
    100% {
        -webkit-transform: rotateY(-100deg);
        transform: rotateY(-100deg);
    }
}
@-webkit-keyframes headHood {
    0% {
        -webkit-transform: rotateY(90deg);
        transform: rotateY(90deg);
    }
    50% {
        -webkit-transform: rotateY(90deg);
        transform: rotateY(90deg);
    }
    80% {
        -webkit-transform: rotateY(190deg);
        transform: rotateY(190deg);
    }
    100% {
        -webkit-transform: rotateY(190deg);
        transform: rotateY(190deg);
    }
}
@keyframes headHood {
    0% {
        -webkit-transform: rotateY(90deg);
        transform: rotateY(90deg);
    }
    50% {
        -webkit-transform: rotateY(90deg);
        transform: rotateY(90deg);
    }
    80% {
        -webkit-transform: rotateY(190deg);
        transform: rotateY(190deg);
    }
    100% {
        -webkit-transform: rotateY(190deg);
        transform: rotateY(190deg);
    }
}
@-webkit-keyframes vibration {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    100% {
        -webkit-transform: translateZ(2px);
        transform: translateZ(2px);
    }
}
@keyframes vibration {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    100% {
        -webkit-transform: translateZ(2px);
        transform: translateZ(2px);
    }
}
@-webkit-keyframes rotatePropeller {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}
@keyframes rotatePropeller {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}

HTML

Unmanned aerial vehicle with only css

h5, css3, fly, plane

编辑器支持Emmet

快捷键

Unmanned aerial vehicle with only css

h5, css3, fly, plane

纯CSS实现的战斗机飞行动画（超棒！）

纯CSS实现的3D飞机模型飞行动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：