\n </div>\n</figure>\n\n<div class="checkbox">\n <input class="d-none" id="toggle-animation" type="checkbox" checked />\n <label class="checkbox__checkbox" for="toggle-animation"></label>\n <label class="checkbox__label" for="toggle-animation">Toggle animation</label>\n</div>\n”,”css”:”// Cards Carousel\n// ———————————————-\n\n.icon-cards {\n position: relative;\n\twidth: 60vw;\n\theight: 40vw;\n max-width: 380px;\n max-height: 250px;\n margin: 0;\n color: white;\n\tperspective: 1000px;\n transform-origin: center;\n\n\t// This is the element that rotates with the animation\n\n\t&__content {\n\t\tposition: absolute;\n\t\twidth: 100%;\n\t\theight: 100%;\n transform-origin: center;\n\t\ttransform-style: preserve-3d;\n\t\ttransform: translateZ(-30vw) rotateY(0);\n\t\tanimation: carousel 10s infinite cubic-bezier(0.77, 0, 0.175, 1) forwards;\n \n &.step-animation {\n animation: carousel 8s infinite steps(1) forwards;\n }\n\t}\n\n\t// Individual cards\n\n\t&__item {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n right: 0;\n bottom: 0;\n\t\twidth: 60vw;\n\t\theight: 40vw;\n max-width: 380px;\n max-height: 250px;\n box-shadow: 0 5px 20px rgba(0,0,0,.1);\n\t\tborder-radius: 6px;\n transform-origin: center;\n\n\t\t&:nth-child(1) {\n\t\t\tbackground: #FDD94F;\n\t\t\ttransform: rotateY(0) translateZ(35vw);\n\t\t}\n\n\t\t&:nth-child(2) {\n\t\t\tbackground: #F87949;\n\t\t\ttransform: rotateY(120deg) translateZ(35vw);\n\t\t}\n\n\t\t&:nth-child(3) {\n\t\t\tbackground: #FBAB48;\n\t\t\ttransform: rotateY(240deg) translateZ(35vw);\n\t\t}\n\t}\n}\n\n// Carousel animation\n\n@keyframes carousel {\n\t0%, 17.5% { transform: translateZ(-35vw) rotateY(0); }\n\t27.5%, 45% { transform: translateZ(-35vw) rotateY(-120deg); }\n\t55%, 72.5% { transform: translateZ(-35vw) rotateY(-240deg); }\n\t82.5%, 100% { transform: translateZ(-35vw) rotateY(-360deg); }\n}\n\n\n// Demo only\n// ———————————————-\n\nhtml,\nbody {\n height: 100%;\n}\n\nbody {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n background: #110F15;\n}\n\n// Checkbox\n\n.checkbox {\n position: relative;\n margin-top: 2rem;\n font-size: .9rem;\n font-weight: bold;\n text-transform: uppercase;\n color: #F47956;\n transition: color .3s ease;\n user-select: none;\n \n &:hover {\n color: #F7A95A;\n }\n\n // Checkbox\n \n &__checkbox {\n position: relative;\n top: 0;\n width: 1.0625rem;\n height: 1.0625rem;\n background: white;\n border: 1px solid currentColor;\n border-radius: 4px;\n vertical-align: middle;\n transition: background 0.1s ease;\n cursor: pointer;\n \n &::after {\n content: ‘’;\n position: absolute;\n top: 1px;\n left: 5px;\n width: 5px;\n height: 11px;\n opacity: 0;\n transform: rotate(45deg) scale(0);\n border-right: 2px solid #fff;\n border-bottom: 2px solid #fff;\n transition: all 0.3s ease;\n transition-delay: 0.15s;\n }\n }\n \n // Label\n \n &__label {\n margin-left: 5px;\n vertical-align: middle;\n cursor: pointer;\n }\n \n // Animate it if checkbo is checked\n \n > input:checked ~ .checkbox__checkbox {\n border-color: transparent;\n background: #F47956;\n animation: jelly 0.6s ease;\n\n &:after {\n opacity: 1;\n transform: rotate(45deg) scale(1);\n }\n }\n}\n\n// Jelly checkbox animation\n\n@keyframes jelly {\n from { transform: scale(1, 1); }\n 30% { transform: scale(1.25, 0.75); }\n 40% { transform: scale(0.75, 1.25); }\n 50% { transform: scale(1.15, 0.85); }\n 65% { transform: scale(0.95, 1.05); }\n 75% { transform: scale(1.05, 0.95); }\n to { transform: scale(1, 1); }\n}\n”,”js”:”function classToggle() {\n var el = document.querySelector(‘.icon-cards__content’);\n el.classList.toggle(‘step-animation’);\n}\n\ndocument.querySelector(‘#toggle-animation’).addEventListener(‘click’, classToggle);”},”options”:{“activeKey”:”player”,”hide”:{“html”:false,”css”:false,”js”:false},”name”:{“html”:”HTML”,”css”:”SCSS”,”js”:”JavaScript”},”layout”:”top”,”profile”:{“html”:””,”css”:”type="text/scss"”,”js”:””},”mode”:{“html”:”htmlmixed”,”css”:”css”,”js”:”javascript”}}}</div>

</div>

第4275篇《CSS 3D转换彩色动画旋转木马》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点