CSS+SVG 漂亮的旋转木马

点击下方的Toggle按钮，还有很酷的收拢和打开的动画。

Carousel

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 5269
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/* MIXINS */
/* ENVIROMENT */
/* grid size = 10px in rem equivalent */
html {
  font-size: 16px;
}
body {
  background: #6ed2d2 url("http://is.gd/Tv0ZyT") repeat top left;
  position: relative;
}
html,
body {
  height: 100%;
}
.button {
  background: #dd5754;
  border-radius: 0.1875rem;
  text-transform: uppercase;
  color: #fff;
  height: 3.125rem;
  line-height: 3.125rem;
  width: 12.5rem;
  text-align: center;
  letter-spacing: 0.125rem;
}
.button:hover {
  background-color: #e06461;
  cursor: pointer;
}
.button:active {
  background-color: #dd5754;
}
.ground {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 7.5rem;
  width: 100%;
  background: #493442 url("http://is.gd/Tv0ZyT") repeat bottom right;
}
.ground .button {
  margin-left: auto;
  margin-right: auto;
  margin-top: 2.1875rem;
  position: relative;
  z-index: 2;
}
/* CAROUSEL */
.no-preserve-3d .carousel {
  background: url("i/carousel-fallback.png") no-repeat center center;
  width: 20.375rem;
  height: 24.1875rem;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  right: 5%;
}
.no-preserve-3d .carousel .carousel--3d,
.no-preserve-3d .carousel .carousel-bottom,
.no-preserve-3d .carousel .carousel-middle,
.no-preserve-3d .carousel .carousel-top {
  display: none;
}
.carousel .carousel--3d {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
  -webkit-transition: all 0.3s ease;
          transition: all 0.3s ease;
}
.carousel .cylinder-1 .side {
  height: 0;
  -webkit-transition: height 0.15s ease-out;
          transition: height 0.15s ease-out;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.carousel .cylinder-1 .banner {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: scale(0) translateZ(0.0625rem);
          transform: scale(0) translateZ(0.0625rem);
  -webkit-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
  transsition-delay: 0;
}
.carousel .carousel-middle {
  width: 0.46875rem;
  margin-left: -0.1875rem;
  -webkit-transition: all 0.15s cubic-bezier(0.545, 0.38, 0.465, 1.54);
          transition: all 0.15s cubic-bezier(0.545, 0.38, 0.465, 1.54);
  -webkit-transform: translateY(25rem) translateX(-0.125rem) translateZ(1.375rem) rotateY(-120deg);
          transform: translateY(25rem) translateX(-0.125rem) translateZ(1.375rem) rotateY(-120deg);
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
.carousel .cylinder-2 .icon-banner {
  -webkit-transform: scale(0) translateZ(1px);
          transform: scale(0) translateZ(1px);
  -webkit-transition: all 0.3s linear;
          transition: all 0.3s linear;
  -webkit-transition-delay: 0;
          transition-delay: 0;
}
.carousel .cylinder-2 .side {
  height: 0;
  top: -1.25rem;
  -webkit-transition: all 0.3s cubic-bezier(0.545, 0.38, 0.465, 1.54);
          transition: all 0.3s cubic-bezier(0.545, 0.38, 0.465, 1.54);
}
.carousel .carousel-bottom {
  width: 1.25rem;
  margin-left: -0.625rem;
  left: 50%;
  -webkit-transition: all 0.3s ease-in;
          transition: all 0.3s ease-in;
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
.carousel.is-open .carousel--3d {
  -webkit-animation: rotateCarousel 40s linear infinite;
          animation: rotateCarousel 40s linear infinite;
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}
.carousel.is-open .carousel-middle {
  -webkit-animation: rotateCarouselMiddle 40s linear infinite;
          animation: rotateCarouselMiddle 40s linear infinite;
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
  -webkit-transition: all 0.3s cubic-bezier(0.545, 0.38, 0.465, 1.54);
          transition: all 0.3s cubic-bezier(0.545, 0.38, 0.465, 1.54);
}
.carousel.is-open .icon-banner {
  top: 35%;
  -webkit-animation: iconBanner 4s ease infinite;
          animation: iconBanner 4s ease infinite;
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}
.carousel.is-open .cylinder-2:nth-of-type(odd) .icon-banner {
  top: 65%;
  -webkit-animation: iconBanner2 4s ease infinite;
          animation: iconBanner2 4s ease infinite;
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}
.carousel.is-open .cylinder-1 .side {
  height: 4rem;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.545, 0.38, 0.465, 1.54);
          transition-timing-function: cubic-bezier(0.545, 0.38, 0.465, 1.54);
}
.carousel.is-open .cylinder-1 .banner {
  -webkit-transform: scale(1) translateZ(0.0625rem);
          transform: scale(1) translateZ(0.0625rem);
}
.carousel.is-open .cylinder-1 .s0 .banner {
  -webkit-transition-delay: 0.9s;
          transition-delay: 0.9s;
}
.carousel.is-open .cylinder-1 .s4 .banner {
  -webkit-transition-delay: 0.975s;
          transition-delay: 0.975s;
}
.carousel.is-open .cylinder-1 .s8 .banner {
  -webkit-transition-delay: 1.05s;
          transition-delay: 1.05s;
}
.carousel.is-open .cylinder-1 .s12 .banner {
  -webkit-transition-delay: 1.125s;
          transition-delay: 1.125s;
}
.carousel.is-open .cylinder-1 .s16 .banner {
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}
.carousel.is-open .cylinder-1 .s20 .banner {
  -webkit-transition-delay: 1.275s;
          transition-delay: 1.275s;
}
.carousel.is-open .cylinder-1 .s24 .banner {
  -webkit-transition-delay: 1.35s;
          transition-delay: 1.35s;
}
.carousel.is-open .cylinder-1 .s28 .banner {
  -webkit-transition-delay: 1.425s;
          transition-delay: 1.425s;
}
.carousel.is-open .cylinder-1 .s32 .banner {
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}
.carousel.is-open .cylinder-1 .s36 .banner {
  -webkit-transition-delay: 1.575s;
          transition-delay: 1.575s;
}
.carousel.is-open .carousel-middle {
  -webkit-transform: translateY(25rem) translateX(-0.125rem) translateZ(1.375rem) rotateY(-120deg);
          transform: translateY(25rem) translateX(-0.125rem) translateZ(1.375rem) rotateY(-120deg);
  width: 5rem;
  margin-left: -2.5rem;
  -webkit-transition-delay: 0.9s;
          transition-delay: 0.9s;
}
.carousel.is-open .carousel-bottom {
  width: 35.375rem;
  left: 0;
  margin-left: -2rem;
  -webkit-transition-timing-function: cubic-bezier(0.545, 0.38, 0.465, 1.54);
          transition-timing-function: cubic-bezier(0.545, 0.38, 0.465, 1.54);
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
.carousel.is-open .cylinder-2 .side {
  height: 16.125rem;
  top: 0;
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
}
.carousel.is-open .cylinder-2 .icon-banner {
  -webkit-transform: scale(1) translateZ(0.0625rem);
          transform: scale(1) translateZ(0.0625rem);
  -webkit-transition-delay: 1.65s;
          transition-delay: 1.65s;
  -webkit-transition-delay: 1.35s;
          transition-delay: 1.35s;
}
.carousel-middle {
  position: absolute;
  width: 5rem;
  height: 22rem;
  background-color: #571313;
  top: 15rem;
  left: 50%;
}
.carousel-bottom {
  position: absolute;
  width: 35.375rem;
  z-index: 1;
  height: 2.5rem;
  bottom: -4.75rem;
  margin-left: -2rem;
  background-color: #dd5754;
  -webkit-transform: translateZ(25rem);
          transform: translateZ(25rem);
}
.carousel-bottom--top,
.carousel-bottom--bottom {
  width: 101.5%;
  margin-left: -0.75%;
  background-color: #891b1b;
  height: 0.25rem;
  position: absolute;
  border-radius: 0.125rem;
}
.carousel-bottom--bottom {
  bottom: 0;
}
.carousel-bottom--bottom2 {
  position: absolute;
  width: 90%;
  left: 5%;
  height: 0.5rem;
  bottom: -0.5rem;
  background-color: #9b2e2e;
}
.carousel-bottom--bottom3 {
  position: absolute;
  height: 1.125rem;
  width: 7rem;
  left: 50%;
  margin-left: -3.5rem;
  bottom: -1.625rem;
  background-color: #571313;
}
.dome {
  position: absolute;
  display: inline-block;
  -webkit-transition: all 0.25s ease-out;
          transition: all 0.25s ease-out;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  fill: #f9f1dd;
}
.dome:nth-of-type(even) {
  fill: #ff6d6a;
}
.model .s1 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(10deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(10deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s1 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(10deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(10deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s2 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(20deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(20deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s2 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(20deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(20deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s3 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(30deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(30deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s3 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(30deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(30deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s4 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(40deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(40deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s4 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(40deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(40deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s5 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(50deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(50deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s5 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(50deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(50deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s6 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(60deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(60deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s6 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(60deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(60deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s7 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(70deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(70deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s7 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(70deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(70deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s8 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(80deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(80deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s8 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(80deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(80deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s9 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(90deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(90deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s9 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(90deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(90deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s10 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(100deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(100deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s10 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(100deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(100deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s11 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(110deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(110deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s11 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(110deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(110deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s12 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(120deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(120deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s12 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(120deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(120deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s13 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(130deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(130deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s13 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(130deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(130deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s14 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(140deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(140deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s14 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(140deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(140deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s15 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(150deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(150deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s15 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(150deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(150deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s16 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(160deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(160deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s16 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(160deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(160deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s17 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(170deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(170deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s17 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(170deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(170deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s18 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(180deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(180deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s18 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(180deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(180deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s19 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(190deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(190deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s19 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(190deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(190deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s20 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(200deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(200deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s20 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(200deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(200deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s21 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(210deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(210deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s21 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(210deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(210deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s22 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(220deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(220deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s22 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(220deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(220deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s23 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(230deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(230deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s23 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(230deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(230deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s24 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(240deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(240deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s24 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(240deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(240deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s25 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(250deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(250deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s25 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(250deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(250deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s26 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(260deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(260deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s26 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(260deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(260deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s27 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(270deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(270deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s27 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(270deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(270deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s28 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(280deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(280deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s28 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(280deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(280deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s29 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(290deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(290deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s29 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(290deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(290deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s30 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(300deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(300deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s30 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(300deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(300deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s31 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(310deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(310deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s31 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(310deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(310deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s32 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(320deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(320deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s32 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(320deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(320deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s33 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(330deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(330deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s33 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(330deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(330deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s34 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(340deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(340deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s34 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(340deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(340deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s35 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(350deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(350deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s35 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(350deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(350deg) scaleZ(1) rotateX(-39.5deg);
}
.model .s36 {
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(360deg) scaleZ(1) rotateX(-90deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(360deg) scaleZ(1) rotateX(-90deg);
  -webkit-transform-origin: 50% top 0;
      -ms-transform-origin: 50% top 0;
          transform-origin: 50% top 0;
  width: 3.03125rem;
  height: 23.15625rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.carousel.is-open .model .s36 {
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transform: translate3d(-3.75rem, 0, 0) rotateZ(360deg) scaleZ(1) rotateX(-39.5deg);
          transform: translate3d(-3.75rem, 0, 0) rotateZ(360deg) scaleZ(1) rotateX(-39.5deg);
}
.carousel--scene {
  -webkit-transform: perspective(12500rem) rotateX(90deg) rotateZ(50deg) translateZ(15.625rem);
          transform: perspective(12500rem) rotateX(90deg) rotateZ(50deg) translateZ(15.625rem);
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  margin-left: -50%;
  margin-top: -50%;
  left: 50%;
  top: 50%;
}
.carousel {
  position: absolute;
  bottom: 9.4375rem;
  left: 50%;
  width: 31.25rem;
  height: 31.25rem;
  transfrom-origin: center bottom;
  -webkit-transform: scale(0.8) translateX(-50%);
      -ms-transform: scale(0.8) translateX(-50%);
          transform: scale(0.8) translateX(-50%);
  margin-left: -3.125rem;
  z-index: 1;
}
.carousel svg {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.carousel--3d,
.carousel--scene,
.carousel--stage {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  position: absolute;
  width: 100%;
  height: 100%;
}
.carousel--stage {
  left: 57%;
  top: 50%;
  opacity: 1;
}
.banner {
  width: 8.375rem;
  height: 5rem;
  top: -2.5rem;
  left: -2.608406118738924rem;
  retina: 'i/brands', 100%, transparent;
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.banner transform translateZ(2px) svg {
  width: 100%;
  height: 100%;
}
.banner__text {
  position: absolute;
  top: 1.25rem;
  left: 0;
  width: 100%;
  color: #fff;
  text-align: center;
}
.banner--text {
  font-size: 2rem;
  padding-top: 0.3125rem;
  color: #fff;
  text-align: center;
  position: relative;
  z-index: 1;
}
.banner--circle {
  position: absolute;
  top: 50%;
  left: -0.875rem;
  margin-top: -0.875rem;
  width: 1.75rem;
  height: 1.75rem;
  background-color: inherit;
  border-radius: inherit;
}
.banner--circle:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -0.125rem;
  margin-top: -0.125rem;
  width: 0.25rem;
  height: 0.25rem;
  background-color: #fff;
}
.banner--circle-right {
  right: -0.875rem;
  left: auto;
}
.icon-banner {
  width: 5rem;
  height: 5rem;
  margin-top: -2.5rem;
  margin-left: -2.5rem;
  position: absolute;
  top: 50%;
  left: 0;
  background-color: #dd5754;
  border-radius: 50%;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.icon-banner .icon {
  width: 50%;
  height: 50%;
  left: 25%;
  top: 25%;
  position: absolute;
  -webkit-transform: translateZ(1px);
          transform: translateZ(1px);
  fill: #f9f1dd;
}
.carousel-top {
  width: 2.5rem;
  height: 5rem;
  position: absolute;
  top: -5rem;
  left: 50%;
  margin-left: -1.25rem;
}
.carousel-top .carousel-top--circle-large,
.carousel-top .carousel-top--circle-small {
  width: 2.5rem;
  height: 2.5rem;
  background-color: #f6c855;
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  box-shadow: inset 0 -0.375rem 0 rgba(0,0,0,0.15);
}
.carousel-top .carousel-top--circle-small {
  width: 1.428571428571429rem;
  height: 1.428571428571429rem;
  bottom: 2.875rem;
  box-shadow: inset 0 -0.25rem 0 rgba(0,0,0,0.15);
  left: 50%;
  margin-left: -0.714285714285715rem;
}
.carousel-top .carousel-top--circle-small:after {
  content: '';
  position: absolute;
  width: 0.375rem;
  height: 2rem;
  background: #d4b05c;
  left: 0.5rem;
  z-index: -1;
}
.carousel-top .carousel-top--circle-small:before {
  content: '';
  position: absolute;
  border: 0.25rem solid rgba(246,200,85,0);
  border-bottom: 2rem solid #f6c855;
  top: -2.125rem;
  left: 0.5rem;
  z-index: -1;
}
.cylinder-1 .face {
  background-color: #dd5754;
  border-bottom-left-radius: 2.5rem;
  border-bottom-right-radius: 2.5rem;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.cylinder-1 .face:nth-of-type(odd) {
  background-color: #e1d7be;
}
.cylinder-1 .face:first-of-type {
  background-color: transparent;
}
.scene,
.shape,
.face,
.face-wrapper,
.cr {
  position: absolute;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.scene {
  width: 80rem;
  height: 80rem;
  top: 50%;
  left: 57%;
  margin: -40rem 0 0 -40rem;
  -webkit-transform: rotateX(-90deg) rotateY(5deg) translate3d(-2.0625rem, 14.625rem, -1.375rem);
          transform: rotateX(-90deg) rotateY(5deg) translate3d(-2.0625rem, 14.625rem, -1.375rem);
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}
.shape {
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  -webkit-transform-origin: 50%;
      -ms-transform-origin: 50%;
          transform-origin: 50%;
}
.face,
.face-wrapper {
  -webkit-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
/* hidden by default, prevent blinking and other weird rendering glitchs */
}
.face-wrapper .face {
  left: 100%;
  width: 100%;
  height: 100%;
}
.side {
  left: 50%;
}
.cr,
.cr .side {
  height: 100%;
}
/* .cyl-1 styles */
.cyl-1 {
  -webkit-transform: translate3d(-0.1875rem, 2.0625rem, 1.1875rem) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
          transform: translate3d(-0.1875rem, 2.0625rem, 1.1875rem) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity: 1;
  width: 35.8125rem;
  height: 4rem;
  margin: -2rem 0 0 -17.90625rem;
}
.cyl-1 .side {
  width: 3.158187762522153rem;
  height: 4rem;
}
.cyl-1 .bm {
  width: 35.8125rem;
  height: 35.8125rem;
  border-radius: 50%;
  -webkit-transform: rotateX(-90deg) translateY(-50%);
          transform: rotateX(-90deg) translateY(-50%);
  top: 65%;
}
.cyl-1 .s1 {
  -webkit-transform: rotateY(15deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(15deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s2 {
  -webkit-transform: rotateY(25deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(25deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s3 {
  -webkit-transform: rotateY(35deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(35deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s4 {
  -webkit-transform: rotateY(45deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(45deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s5 {
  -webkit-transform: rotateY(55deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(55deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s6 {
  -webkit-transform: rotateY(65deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(65deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s7 {
  -webkit-transform: rotateY(75deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(75deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s8 {
  -webkit-transform: rotateY(85deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(85deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s9 {
  -webkit-transform: rotateY(95deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(95deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s10 {
  -webkit-transform: rotateY(105deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(105deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s11 {
  -webkit-transform: rotateY(115deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(115deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s12 {
  -webkit-transform: rotateY(125deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(125deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s13 {
  -webkit-transform: rotateY(135deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(135deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s14 {
  -webkit-transform: rotateY(145deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(145deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s15 {
  -webkit-transform: rotateY(155deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(155deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s16 {
  -webkit-transform: rotateY(165deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(165deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s17 {
  -webkit-transform: rotateY(175deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(175deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s18 {
  -webkit-transform: rotateY(185deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(185deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s19 {
  -webkit-transform: rotateY(195deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(195deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s20 {
  -webkit-transform: rotateY(205deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(205deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s21 {
  -webkit-transform: rotateY(215deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(215deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s22 {
  -webkit-transform: rotateY(225deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(225deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s23 {
  -webkit-transform: rotateY(235deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(235deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s24 {
  -webkit-transform: rotateY(245deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(245deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s25 {
  -webkit-transform: rotateY(255deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(255deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s26 {
  -webkit-transform: rotateY(265deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(265deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s27 {
  -webkit-transform: rotateY(275deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(275deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s28 {
  -webkit-transform: rotateY(285deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(285deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s29 {
  -webkit-transform: rotateY(295deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(295deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s30 {
  -webkit-transform: rotateY(305deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(305deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s31 {
  -webkit-transform: rotateY(315deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(315deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s32 {
  -webkit-transform: rotateY(325deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(325deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s33 {
  -webkit-transform: rotateY(335deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(335deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s34 {
  -webkit-transform: rotateY(345deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(345deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s35 {
  -webkit-transform: rotateY(355deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(355deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s36 {
  -webkit-transform: rotateY(365deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(365deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-1 .s37 {
  -webkit-transform: rotateY(375deg) translate3d(-50%, 0, 17.88125rem);
          transform: rotateY(375deg) translate3d(-50%, 0, 17.88125rem);
}
.cyl-2 {
  -webkit-transform: translate3d(-11.091666666666663rem, 10.249999999999998rem, -9.958333333333334rem) rotateX(0deg) rotateY(-90deg) rotateZ(0deg);
          transform: translate3d(-11.091666666666663rem, 10.249999999999998rem, -9.958333333333334rem) rotateX(0deg) rotateY(-90deg) rotateZ(0deg);
  opacity: 1;
  width: 0.25rem;
  height: 17rem;
  margin: -7.5rem 0 0 -0.125rem;
}
.cyl-2 .side {
  width: 0.458012701892219rem;
  height: 17rem;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
}
.cyl-2 .face,
.cyl-2 .side {
  background-color: #faf4e5;
}
.cyl-2 .s0 {
  -webkit-transform: rotateY(60deg) translate3d(-50%, 0, 0.1rem);
          transform: rotateY(60deg) translate3d(-50%, 0, 0.1rem);
}
.cyl-2 .s1 {
  -webkit-transform: rotateY(180deg) translate3d(-50%, 0, 0.1rem);
          transform: rotateY(180deg) translate3d(-50%, 0, 0.1rem);
}
.cyl-2 .s2 {
  -webkit-transform: rotateY(300deg) translate3d(-50%, 0, 0.1rem);
          transform: rotateY(300deg) translate3d(-50%, 0, 0.1rem);
}
.cyl-3 {
  -webkit-transform: translate3d(0, 10.249999999999998rem, -14rem) rotateX(0deg) rotateY(240deg) rotateZ(0deg);
          transform: translate3d(0, 10.249999999999998rem, -14rem) rotateX(0deg) rotateY(240deg) rotateZ(0deg);
  opacity: 1;
  width: 0.25rem;
  height: 17rem;
  margin: -7.5rem 0 0 -0.125rem;
}
.cyl-3 .side {
  width: 0.458012701892219rem;
  height: 17rem;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
}
.cyl-3 .face,
.cyl-3 .side {
  background-color: #faf4e5;
}
.cyl-3 .s0 {
  -webkit-transform: rotateY(60deg) translate3d(-50%, 0, 0.1rem);
          transform: rotateY(60deg) translate3d(-50%, 0, 0.1rem);
}
.cyl-3 .s1 {
  -webkit-transform: rotateY(180deg) translate3d(-50%, 0, 0.1rem);
          transform: rotateY(180deg) translate3d(-50%, 0, 0.1rem);
}
.cyl-3 .s2 {
  -webkit-transform: rotateY(300deg) translate3d(-50%, 0, 0.1rem);
          transform: rotateY(300deg) translate3d(-50%, 0, 0.1rem);
}
.cyl-4 {
  -webkit-transform: translate3d(10.658333333333337rem, 10.249999999999998rem, -10.250000000000002rem) rotateX(0deg) rotateY(180deg) rotateZ(0deg);
          transform: translate3d(10.658333333333337rem, 10.249999999999998rem, -10.250000000000002rem) rotateX(0deg) rotateY(180deg) rotateZ(0deg);
  opacity: 1;
  width: 0.25rem;
  height: 17rem;
  margin: -7.5rem 0 0 -0.125rem;
}
.cyl-4 .side {
  width: 0.458012701892219rem;
  height: 17rem;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
}
.cyl-4 .face,
.cyl-4 .side {
  background-color: #faf4e5;
}
.cyl-4 .s0 {
  -webkit-transform: rotateY(60deg) translate3d(-50%, 0, 0.1rem);
          transform: rotateY(60deg) translate3d(-50%, 0, 0.1rem);
}
.cyl-4 .s1 {
  -webkit-transform: rotateY(180deg) translate3d(-50%, 0, 0.1rem);
          transform: rotateY(180deg) translate3d(-50%, 0, 0.1rem);
}
.cyl-4 .s2 {
  -webkit-transform: rotateY(300deg) translate3d(-50%, 0, 0.1rem);
          transform: rotateY(300deg) translate3d(-50%, 0, 0.1rem);
}
.cyl-5 {
  -webkit-transform: translate3d(15.666666666666666rem, 10.249999999999998rem, 0.083333333333333rem) rotateX(0deg) rotateY(160deg) rotateZ(0deg);
          transform: translate3d(15.666666666666666rem, 10.249999999999998rem, 0.083333333333333rem) rotateX(0deg) rotateY(160deg) rotateZ(0deg);
  opacity: 1;
  width: 0.25rem;
  height: 17rem;
  margin: -7.5rem 0 0 -0.125rem;
}
.cyl-5 .side {
  width: 0.458012701892219rem;
  height: 17rem;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
}
.cyl-5 .face,
.cyl-5 .side {
  background-color: #faf4e5;
}
.cyl-5 .s0 {
  -webkit-transform: rotateY(60deg) translate3d(-50%, 0, 0.1rem);
          transform: rotateY(60deg) translate3d(-50%, 0, 0.1rem);
}
.cyl-5 .s1 {
  -webkit-transform: rotateY(180deg) translate3d(-50%, 0, 0.1rem);
          transform: rotateY(180deg) translate3d(-50%, 0, 0.1rem);
}
.cyl-5 .s2 {
  -webkit-transform: rotateY(300deg) translate3d(-50%, 0, 0.1rem);
          transform: rotateY(300deg) translate3d(-50%, 0, 0.1rem);
}
.cyl-6 {
  -webkit-transform: translate3d(11.450000000000003rem, 10.249999999999998rem, 10.895833333333334rem) rotateX(0deg) rotateY(100deg) rotateZ(0deg);
          transform: translate3d(11.450000000000003rem, 10.249999999999998rem, 10.895833333333334rem) rotateX(0deg) rotateY(100deg) rotateZ(0deg);
  opacity: 1;
  width: 0.25rem;
  height: 17rem;
  margin: -7.5rem 0 0 -0.125rem;
}
.cyl-6 .side {
  width: 0.458012701892219rem;
  height: 17rem;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
}
.cyl-6 .face,
.cyl-6 .side {
  background-color: #faf4e5;
}
.cyl-6 .s0 {
  -webkit-transform: rotateY(60deg) translate3d(-50%, 0, 0.1rem);
          transform: rotateY(60deg) translate3d(-50%, 0, 0.1rem);
}
.cyl-6 .s1 {
  -webkit-transform: rotateY(180deg) translate3d(-50%, 0, 0.1rem);
          transform: rotateY(180deg) translate3d(-50%, 0, 0.1rem);
}
.cyl-6 .s2 {
  -webkit-transform: rotateY(300deg) translate3d(-50%, 0, 0.1rem);
          transform: rotateY(300deg) translate3d(-50%, 0, 0.1rem);
}
.cyl-7 {
  -webkit-transform: translate3d(-11.070833333333331rem, 10.249999999999998rem, 11.979166666666666rem) rotateX(0deg) rotateY(20deg) rotateZ(0deg);
          transform: translate3d(-11.070833333333331rem, 10.249999999999998rem, 11.979166666666666rem) rotateX(0deg) rotateY(20deg) rotateZ(0deg);
  opacity: 1;
  width: 0.25rem;
  height: 17rem;
  margin: -7.5rem 0 0 -0.125rem;
}
.cyl-7 .side {
  width: 0.458012701892219rem;
  height: 17rem;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
}
.cyl-7 .face,
.cyl-7 .side {
  background-color: #faf4e5;
}
.cyl-7 .s0 {
  -webkit-transform: rotateY(60deg) translate3d(-50%, 0, 0.1rem);
          transform: rotateY(60deg) translate3d(-50%, 0, 0.1rem);
}
.cyl-7 .s1 {
  -webkit-transform: rotateY(180deg) translate3d(-50%, 0, 0.1rem);
          transform: rotateY(180deg) translate3d(-50%, 0, 0.1rem);
}
.cyl-7 .s2 {
  -webkit-transform: rotateY(300deg) translate3d(-50%, 0, 0.1rem);
          transform: rotateY(300deg) translate3d(-50%, 0, 0.1rem);
}
.cyl-8 {
  -webkit-transform: translate3d(-16rem, 10.249999999999998rem, 0) rotateX(0deg) rotateY(-40deg) rotateZ(0deg);
          transform: translate3d(-16rem, 10.249999999999998rem, 0) rotateX(0deg) rotateY(-40deg) rotateZ(0deg);
  opacity: 1;
  width: 0.25rem;
  height: 17rem;
  margin: -7.5rem 0 0 -0.125rem;
}
.cyl-8 .side {
  width: 0.458012701892219rem;
  height: 17rem;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
}
.cyl-8 .face,
.cyl-8 .side {
  background-color: #faf4e5;
}
.cyl-8 .s0 {
  -webkit-transform: rotateY(60deg) translate3d(-50%, 0, 0.1rem);
          transform: rotateY(60deg) translate3d(-50%, 0, 0.1rem);
}
.cyl-8 .s1 {
  -webkit-transform: rotateY(180deg) translate3d(-50%, 0, 0.1rem);
          transform: rotateY(180deg) translate3d(-50%, 0, 0.1rem);
}
.cyl-8 .s2 {
  -webkit-transform: rotateY(300deg) translate3d(-50%, 0, 0.1rem);
          transform: rotateY(300deg) translate3d(-50%, 0, 0.1rem);
}
.cyl-9 {
  -webkit-transform: translate3d(0, 10.249999999999998rem, 16.583333333333332rem) rotateX(0deg) rotateY(70deg) rotateZ(0deg);
          transform: translate3d(0, 10.249999999999998rem, 16.583333333333332rem) rotateX(0deg) rotateY(70deg) rotateZ(0deg);
  opacity: 1;
  width: 0.25rem;
  height: 17rem;
  margin: -7.5rem 0 0 -0.125rem;
}
.cyl-9 .side {
  width: 0.458012701892219rem;
  height: 17rem;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
}
.cyl-9 .face,
.cyl-9 .side {
  background-color: #faf4e5;
}
.cyl-9 .s0 {
  -webkit-transform: rotateY(60deg) translate3d(-50%, 0, 0.1rem);
          transform: rotateY(60deg) translate3d(-50%, 0, 0.1rem);
}
.cyl-9 .s1 {
  -webkit-transform: rotateY(180deg) translate3d(-50%, 0, 0.1rem);
          transform: rotateY(180deg) translate3d(-50%, 0, 0.1rem);
}
.cyl-9 .s2 {
  -webkit-transform: rotateY(300deg) translate3d(-50%, 0, 0.1rem);
          transform: rotateY(300deg) translate3d(-50%, 0, 0.1rem);
}
@-webkit-keyframes iconBanner {
  0% {
    top: 35%;
  }
  50% {
    top: 65%;
  }
  100% {
    top: 35%;
  }
}
@keyframes iconBanner {
  0% {
    top: 35%;
  }
  50% {
    top: 65%;
  }
  100% {
    top: 35%;
  }
}
@-webkit-keyframes iconBanner2 {
  0% {
    top: 65%;
  }
  50% {
    top: 35%;
  }
  100% {
    top: 65%;
  }
}
@keyframes iconBanner2 {
  0% {
    top: 65%;
  }
  50% {
    top: 35%;
  }
  100% {
    top: 65%;
  }
}
@-webkit-keyframes rotateCarousel {
  0% {
    -webkit-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
  }
  100% {
    -webkit-transform: rotateY(-540deg);
            transform: rotateY(-540deg);
  }
}
@keyframes rotateCarousel {
  0% {
    -webkit-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
  }
  100% {
    -webkit-transform: rotateY(-540deg);
            transform: rotateY(-540deg);
  }
}
@-webkit-keyframes rotateCarouselMiddle {
  0% {
    -webkit-transform: translateY(25rem) translateX(-0.125rem) translateZ(1.375rem) rotateY(-120deg);
            transform: translateY(25rem) translateX(-0.125rem) translateZ(1.375rem) rotateY(-120deg);
  }
  100% {
    -webkit-transform: translateY(25rem) translateX(-0.125rem) translateZ(1.375rem) rotateY(240deg);
            transform: translateY(25rem) translateX(-0.125rem) translateZ(1.375rem) rotateY(240deg);
  }
}
@keyframes rotateCarouselMiddle {
  0% {
    -webkit-transform: translateY(25rem) translateX(-0.125rem) translateZ(1.375rem) rotateY(-120deg);
            transform: translateY(25rem) translateX(-0.125rem) translateZ(1.375rem) rotateY(-120deg);
  }
  100% {
    -webkit-transform: translateY(25rem) translateX(-0.125rem) translateZ(1.375rem) rotateY(240deg);
            transform: translateY(25rem) translateX(-0.125rem) translateZ(1.375rem) rotateY(240deg);
  }
}

HTML

点击下方的Toggle按钮，还有很酷的收拢和打开的动画。

Carousel

编辑器支持Emmet

快捷键

点击下方的Toggle按钮，还有很酷的收拢和打开的动画。

Carousel

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：