1 line
8.6 KiB
CSS
1 line
8.6 KiB
CSS
|
.plane-bg{bottom:0;left:50%;position:absolute;right:0;top:0}@keyframes airplane-wrap-anim{0%{transform:rotateX(0deg) rotateY(-5deg) rotate(0deg)}40%{transform:rotateX(0deg) rotateY(-10deg) rotate(0deg)}60%{transform:rotateX(5deg) rotateY(15deg) rotate(-18deg)}80%{transform:rotateX(2deg) rotateY(5deg) rotate(-10deg)}to{transform:rotateX(0deg) rotateY(-5deg) rotate(0deg)}}@keyframes airplane{0%{transform:rotateY(-17deg) rotate(21deg) rotateX(-23deg) translateX(0)}25%{transform:rotateY(-13deg) rotate(13deg) rotateX(-19deg) translateX(100px)}50%{transform:rotateY(-10deg) rotate(19deg) rotateX(-15deg) translateX(-70px)}75%{transform:rotateY(-13deg) rotate(13deg) rotateX(-19deg) translateX(40px)}to{transform:rotateY(-17deg) rotate(21deg) rotateX(-23deg) translateX(0)}}@keyframes airplane-pos-anim{0%{left:50%}40%{left:40%}70%{left:70%}to{left:50%}}@keyframes propeller{0%{transform:translate3d(50px,60px,300px) rotate(0deg)}to{transform:translate3d(50px,60px,300px) rotate(-1turn)}}.plane-bg .airplane-wrap{animation-duration:16s;animation-iteration-count:infinite;animation-name:airplane-wrap-anim;animation-timing-function:ease-in-out;height:100%;transform:rotateX(0deg) rotateY(-5deg) rotate(0deg);transform-style:preserve-3d;width:100%;z-index:3}.plane-bg .airplane{animation-duration:16s;animation-iteration-count:infinite;animation-name:airplane,airplane-pos-anim;animation-timing-function:ease-in-out;right:50%;top:36%;transform:rotateY(-17deg) rotate(21deg) rotateX(-23deg) translateX(0)}.plane-bg .airplane,.plane-bg .grp{position:absolute;transform-style:preserve-3d}.plane-bg .grp{transform-origin:center;width:0}.plane-bg .bordered{border:2px solid rgba(96,138,177,.7);position:absolute}.plane-bg .bordered-thin{border:1px solid rgba(96,138,177,.7);position:absolute}.plane-bg .plate{border:2px solid rgba(96,138,177,.7)}.plane-bg .plate,.plane-bg .plate-no-border{background-color:transparent;position:absolute}.plane-bg .front-cover{transform:translateZ(250px)}.plane-bg .front-cover>div{transform-origin:bottom}.plane-bg .front-cover-inner{height:80px;transform:translate3d(0,20px,0);width:100px}.plane-bg .front-cover-center{height:50px;transform:translate3d(20px,35px,45px);width:60px}.plane-bg .trapezoid{border-bottom-color:transparent;border-bottom-style:solid;position:absolute}.plane-bg .front-cover-top{transform:translate3d(0,-24px,2px) rotateX(-108deg)}.plane-bg .front-cover-bottom,.plane-bg .front-cover-top{border-bottom-width:45px;border-left:21px solid transparent;border-right:21px solid transparent;height:0;width:60px}.plane-bg .front-cover-bottom{transform:translate3d(0,57px,2px) rotateX(-72deg)}.plane-bg .front-cover-left{transform:translate3d(62px,14px,0) rotateX(0deg) rotateY(68deg) rotate(-90deg)}.plane-bg .front-cover-left,.plane-bg .front-cover-right{border-bottom-width:48px;border-left:14px solid transparent;border-right:14px solid transparent;height:0;width:53px}.plane-bg .front-cover-right{transform:translate3d(-38px,14px,0) rotateX(0deg) rotateY(112deg) rotate(-90deg)}.plane-bg .front-cover-top-left{height:0;transform:translate3d(68px,27px,24px) rotateY(63deg) rotate(-18deg) rotateX(45deg);width:48px}.plane-bg .front-cover-top-right{height:0;transform:translate3d(-15px,27px,24px) rotateY(118deg) rotate(-18deg) rotateX(-45deg);width:48px}.plane-bg .front-cover-bottom-left{height:0;transform:translate3d(67px,94px,24px) rotateY(64deg) rotate(17deg) rotateX(-45deg);width:48px}.plane-bg .front-cover-bottom-right{height:0;transform:translate3d(-13px,94px,24px) rotateY(115deg) rotate(16deg) rotateX(45deg);width:48px}.plane-bg .left-cover{height:80px;transform:rotateY(90deg) translate3d(0,20px,-148px);width:500px}.plane-bg .right-cover{height:80px;transform:rotateY(90deg) translate3d(0,20px,-252px);width:500px}.plane-bg .top-cover-front{height:100px;transform:rotateY(90deg) rotateX(90deg) translate3d(-162px,-38px,30px);width:175px}.plane-bg .top-cover-back{height:100px;transform:rotateY(90deg) rotateX(90deg) translate3d(160px,-40px,31px);width:180px}.plane-bg .roof{height:100px;transform:rotateY(90deg) rotateX(90deg) transla
|