#flutter_target { border: 1px solid #aaa; width: 320px; height: 480px; border-radius: 0px; transition: all 150ms ease-in; align-self: center; } #flutter_target.resize { width: 480px; height: 320px; } #flutter_target.spin { animation: spin 6400ms ease-in-out infinite; } #flutter_target.shadow { position: relative; } #flutter_target.shadow::before { content: ''; position: absolute; display: block; width: 100%; top: calc(100% - 1px); left: 0; height: 1px; background-color: black; border-radius: 50%; z-index: -1; transform: rotateX(80deg); box-shadow: 0px 0px 60px 38px rgb(0 0 0 / 25%); } #flutter_target.mirror { -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); } @keyframes spin { 0% { transform: perspective(1000px) rotateY(0deg); animation-timing-function: ease-in; } 15% { transform: perspective(1000px) rotateY(165deg); animation-timing-function: linear; } 75% { transform: perspective(1000px) rotateY(195deg); animation-timing-function: linear; } 90% { transform: perspective(1000px) rotateY(359deg); animation-timing-function: ease-out; } 100% { transform: perspective(1000px) rotateY(359deg); animation-timing-function: linear; } }