css3 万花筒原理,纯CSS万花筒

CSS

语言：

CSSSCSS

确定

body {

overflow: hidden;

background-color: #222;

}

.container {

position: absolute;

width: 140vmax;

height: 140vmax;

top: 50%;

left: 50%;

-webkit-animation: spin 60s linear infinite;

animation: spin 60s linear infinite;

}

section {

position: absolute;

left: 50%;

bottom: 50%;

width: 37.51285vmax;

height: 70vmax;

-webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%);

clip-path: polygon(0% 0%, 100% 0%, 50% 100%);

-webkit-transform-origin: 50% 100%;

transform-origin: 50% 100%;

background-image: url("http://blucube.net/stuff/codepen-assets/kaleidoscope/glass.jpg");

background-size: auto 150%;

-webkit-animation: move-background 12s infinite alternate ease-in-out;

animation: move-background 12s infinite alternate ease-in-out;

}

.sect-1 {

-webkit-transform: translateX(-50%) rotateY(180deg) rotateZ(30deg);

transform: translateX(-50%) rotateY(180deg) rotateZ(30deg);

}

.sect-2 {

-webkit-transform: translateX(-50%) rotateZ(60deg);

transform: translateX(-50%) rotateZ(60deg);

}

.sect-3 {

-webkit-transform: translateX(-50%) rotateY(180deg) rotateZ(90deg);

transform: translateX(-50%) rotateY(180deg) rotateZ(90deg);

}

.sect-4 {

-webkit-transform: translateX(-50%) rotateZ(120deg);

transform: translateX(-50%) rotateZ(120deg);

}

.sect-5 {

-webkit-transform: translateX(-50%) rotateY(180deg) rotateZ(150deg);

transform: translateX(-50%) rotateY(180deg) rotateZ(150deg);

}

.sect-6 {

-webkit-transform: translateX(-50%) rotateZ(180deg);

transform: translateX(-50%) rotateZ(180deg);

}

.sect-7 {

-webkit-transform: translateX(-50%) rotateY(180deg) rotateZ(210deg);

transform: translateX(-50%) rotateY(180deg) rotateZ(210deg);

}

.sect-8 {

-webkit-transform: translateX(-50%) rotateZ(240deg);

transform: translateX(-50%) rotateZ(240deg);

}

.sect-9 {

-webkit-transform: translateX(-50%) rotateY(180deg) rotateZ(270deg);

transform: translateX(-50%) rotateY(180deg) rotateZ(270deg);

}

.sect-10 {

-webkit-transform: translateX(-50%) rotateZ(300deg);

transform: translateX(-50%) rotateZ(300deg);

}

.sect-11 {

-webkit-transform: translateX(-50%) rotateY(180deg) rotateZ(330deg);

transform: translateX(-50%) rotateY(180deg) rotateZ(330deg);

}

.sect-12 {

-webkit-transform: translateX(-50%) rotateZ(360deg);

transform: translateX(-50%) rotateZ(360deg);

}

@-webkit-keyframes spin {

0% {

-webkit-transform: translateX(-50%) translateY(-50%) rotateZ(0deg);

transform: translateX(-50%) translateY(-50%) rotateZ(0deg);

}

100% {

-webkit-transform: translateX(-50%) translateY(-50%) rotateZ(-360deg);

transform: translateX(-50%) translateY(-50%) rotateZ(-360deg);

}

}

@keyframes spin {

0% {

-webkit-transform: translateX(-50%) translateY(-50%) rotateZ(0deg);

transform: translateX(-50%) translateY(-50%) rotateZ(0deg);

}

100% {

-webkit-transform: translateX(-50%) translateY(-50%) rotateZ(-360deg);

transform: translateX(-50%) translateY(-50%) rotateZ(-360deg);

}

}

@-webkit-keyframes move-background {

0% {

background-position: 100% 0%;

}

100% {

background-position: 0% 100%;

}

}

@keyframes move-background {

0% {

background-position: 100% 0%;

}

100% {

background-position: 0% 100%;

}

}