3D纸飞机MATLAB代码,使用纯CSS实现的迎着阳光飞行的3D纸飞机

CSS

语言：

CSSSCSS

确定

/* I believe I can... */

@keyframes fly {

0% {

transform: perspective(1000px) rotateY(270deg) translateX(-50vh) translateY(-50%) translateZ(50vw);

}

75% {

transform: perspective(1000px) rotateY(-810deg) translateX(50vh) translateY(50%) translateZ(0);

}

}

@keyframes sunshine {

0%, 75% {

top: -30vh;

transform: scale(0);

}

}

@keyframes wind {

25% {

opacity: .8;

transform: rotateY(90deg) translateX(1000vh);

}

100% {

opacity: .8;

transform: rotateY(90deg) translateX(-100vh);

}

}

* {

margin: 0;

padding: 0;

outline: 0;

}

html,

body {

position: absolute;

width: 100%;

height: 100%;

overflow: hidden;

background: skyblue;

z-index: -2;

}

.container {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

width: 50vh;

height: 50vh;

transform: rotateY(-90deg);

transform-style: preserve-3d;

transition: .5s;

z-index: -1;

animation: fly 8s ease-out;

}

.sun {

position: absolute;

top: -15vh;

left: 0;

right: 0;

margin: auto;

width: 30vh;

max-width: 30vw;

height: 30vh;

max-height: 30vw;

border-radius: 50%;

background: lightgoldenrodyellow;

box-shadow: inset 0 0 10vw 5vw white, 0 0 15vw 10vw white;

filter: blur(20px);

/* For Firefox */

transition: .5s;

animation: sunshine 8s ease-out;

z-index: -2;

}

svg {

position: absolute;

left: 0;

z-index: 2;

}

.ltop {

position: absolute;

top: 0;

left: 0;

width: 50%;

height: 50%;

}

.ltop:hover ~ .container {

transform: perspective(1000px) rotateY(-135deg) translateY(-20vh) translateZ(50vh);

transition: 1s;

}

.ltop:hover ~ .sun {

top: 90vh;

right: -100%;

transition: 1s;

}

.ltop:hover ~ .wind {

transform: perspective(800px) rotateX(-15deg) rotateY(-45deg);

transform-origin: left;

transition: 1s;

}

.lbot {

position: absolute;

bottom: 0;

left: 0;

width: 50%;

height: 50%;

}

.lbot:hover ~ .container {

transform: perspective(1000px) rotateY(-135deg) translateY(50vh) translateZ(50vh);

transition: 1s;

}

.lbot:hover ~ .sun {

top: -15vh;

right: -100%;

transition: 1s;

}

.lbot:hover ~ .wind {

transform: perspective(800px) rotateX(10deg) rotateY(-45deg);

transform-origin: left;

transition: 1s;

}

.rtop {

position: absolute;

top: 0;

right: 0;

width: 50%;

height: 50%;

}

.rtop:hover ~ .container {

transform: perspective(1000px) rotateY(-45deg) translateY(-20vh) translateZ(-50vh);

transition: 1s;

}

.rtop:hover ~ .sun {

top: 90vh;

left: -100%;

transition: 1s;

}

.rtop:hover ~ .wind {

transform: perspective(800px) rotateX(-15deg) rotateY(45deg);

transform-origin: right;

transition: 1s;

}

.rbot {

position: absolute;

bottom: 0;

right: 0;

width: 50%;

height: 50%;

}

.rbot:hover ~ .container {

transform: perspective(1000px) rotateY(-45deg) translateY(50vh) translateZ(-50vh);

transition: 1s;

}

.rbot:hover ~ .sun {

left: -100%;

transition: 1s;

}

.rbot:hover ~ .wind {

transform: perspective(800px) rotateX(10deg) rotateY(45deg);

transform-origin: right;

transition: 1s;

}

#lside {

border-top: 25vh solid transparent;

border-right: 50vh solid #ececec;

transform: rotate(-5deg) rotateY(0deg) rotateX(-10deg);

transform-origin: bottom;

}

#rside {

margin-top: -25vh;

border-top: 25vh solid transparent;

border-right: 50vh solid #ececec;

transform: rotate(-5deg) rotateY(0deg) rotateX(10deg);

transform-origin: bottom;

}

#lwing {

margin-top: -25vh;

border-bottom: 25vh solid #f5f5f5;

border-right: 30vh solid transparent;

border-left: 50vh solid transparent;

transform: rotate(-22deg) rotateX(55deg) rotateY(-10deg) rotateZ(25deg);

transform-origin: top;

}

#rwing {

margin-top: -25vh;

border-bottom: 25vh solid #f5f5f5;

border-right: 30vh solid transparent;

border-left: 50vh solid transparent;

transform: rotate(-22deg) rotateX(-55deg) rotateY(10deg) rotateZ(25deg);

transform-origin: top;

}

.wind {

position: absolute;

width: 100%;

height: 100%;

perspective: 800px;

z-index: -2;

}

.wind > div {

position: absolute;

height: 5px;

background: linear-gradient(to right, white, transparent);

border-radius: 10px;

opacity: 0;

}

#lw1 {

top: 0;

left: 10%;

width: 20vh;

animation: wind 1.2s linear 6s infinite;

}

#lw2 {

top: 50%;

left: 0;

width: 50vh;

animation: wind .8s linear 6s infinite;

}

#lw3 {

top: 80%;

left: 0;

width: 40vh;

animation: wind 1s linear 6s infinite;

}

#rw1 {

top: 10%;

right: 0;

width: 30vh;

animation: wind 1s linear 6s infinite;

}

#rw2 {

top: 20%;

right: 0;

width: 40vh;

animation: wind 1.2s linear 6s infinite;

}

#rw3 {

top: 70%;

right: 0;

width: 20vh;

animation: wind 1.5s linear 6s infinite;

}

#rw4 {

top: 100%;

right: 20%;

width: 50vh;

animation: wind .8s linear 6s infinite;

}