css+沿正方形旋转,CSS3+SVG+JS 正方形沿着正方本中轴移动翻转的动画

CSS

语言：

CSSSCSS

确定

* {

margin: 0;

padding: 0;

fill: currentColor;

vector-effect: non-scaling-stroke;

}

html {

overflow: hidden;

}

body {

display: flex;

flex-direction: column;

margin: 0;

min-width: 10em;

height: 100vh;

}

body > svg,

body > input,

body > label {

position: absolute;

}

@media (min-aspect-ratio: 105 / 100) and (min-width: 50em) {

body {

flex-direction: row;

}

body pre {

width: 10em;

display: flex;

flex-direction: column;

justify-content: center;

}

}

line {

stroke: currentColor;

stroke-width: 2px;

marker-end: url(#arrow);

vector-effect: non-scaling-stroke;

}

div {

position: absolute;

transform-style: preserve-3d;

}

pre {

order: 1;

padding: .5em 1em;

background: #111;

color: #ccc;

font: .875em/2 courier;

white-space: pre-wrap;

}

@media (min-width: 15em) {

pre {

font-size: 1em;

}

}

@media (min-width: 20em) {

pre {

font-size: 1.25em;

}

}

@media (min-width: 75em) {

pre {

font-size: 1.5em;

}

}

body > svg {

position: absolute;

}

.hidden {

opacity: .001;

}

.scene {

flex: 1;

order: 2;

perspective: 32em;

perspective-origin: calc(50% - 10em) 50%;

}

.cube {

--inradius: 19%;

top: 50%;

left: 50%;

margin: calc(-1*var(--inradius));

padding: var(--inradius);

}

.cube__face {

box-shadow: inset 0 0 0 1px black;

opacity: .5;

background: whitesmoke;

}

.cube__face:nth-child(1) {

transform: rotateY(0deg) translate(50%) rotateY(90deg);

}

.cube__face:nth-child(2) {

transform: rotateY(90deg) translate(50%) rotateY(90deg);

}

.cube__face:nth-child(3) {

transform: rotateY(180deg) translate(50%) rotateY(90deg);

}

.cube__face:nth-child(4) {

transform: rotateY(270deg) translate(50%) rotateY(90deg);

}

.cube__face:nth-child(5) {

transform: rotate(90deg) translate(50%) rotateY(90deg);

}

.cube__face:nth-child(6) {

transform: rotate(-90deg) translate(50%) rotateY(90deg);

}

@media (min-aspect-ratio: 1 / 1) and (min-width: 50em) {

.cube {

--inradius: 15%;

}

}

@media (min-aspect-ratio: 13 / 10) and (min-width: 62.5em) {

.cube {

--inradius: 12.5%;

}

}

@media (min-aspect-ratio: 13 / 10) and (min-width: 75em) {

.cube {

--inradius: 10%;

}

}

@media (min-aspect-ratio: 13 / 10) and (min-width: 100em) {

.cube {

--inradius: 8%;

}

}

.square {

top: 0;

right: 0;

bottom: 0;

left: 0;

}

.square:not(.cube__face) > svg {

width: 100%;

height: 100%;

}

@media (min-width: 20em) {

.square:not(.cube__face):after {

position: absolute;

right: .25em;

bottom: 50%;

font: italic 2em/1.5 times new roman, serif;

content: 'x';

}

}

.ini {

background: rgba(192, 192, 192, 0.65);

}

.ani {

background: rgba(238, 140, 37, 0.75);

}

.basic {

animation: ani 5s linear infinite;

animation-play-state: paused;

}

@keyframes ani {

0%, 20% {

transform: none;

}

40% {

transform: rotateY(-90deg);

}

60% {

transform: rotateY(-90deg) translate(50%);

}

80%,

100% {

transform: rotateY(-90deg) translate(50%) rotateY(90deg);

}

}

.token--fnc {

color: #8ecfee;

}

.token--uni {

color: #d0a4dc;

}

.token--var {

color: #e8a398;

font-weight: 900;

}

[id='run'] {

position: absolute;

left: -100vw;

}

[id='run']:checked ~ .scene .basic {

animation-play-state: running;

}

[id='run']:checked ~ [for='run'] {

opacity: .001;

}

[for='run'] {

display: flex;

justify-content: center;

position: absolute;

z-index: 3;

top: 0;

left: 0;

width: 100vw;

height: 100vh;

opacity: .999;

transition: opacity .5s;

cursor: pointer;

}

[for='run'] svg {

align-self: center;

width: 8em;

height: 8em;

}

[for='run'] svg:hover use {

stroke-dashoffset: 0;

}

[for='run'] * {

fill: none;

stroke: #4ca454;

}

[for='run'] use {

transition: stroke-dashoffset 1s ease-in-out;

stroke-width: .5em;

}

[for='run'] path {

stroke-width: .25em;

}