CSS3旋转的生日蛋糕

超有型的三层蛋糕，还有点燃的蜡烛和五彩缤纷的果蜡。

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

第三方库
作品简介 2156
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html {
  height: 100%;
}
body {
  background: -webkit-radial-gradient(#CEEDF3 30%,#78CEDF);
  font-family: 'Alfa Slab One', cursive;
  overflow: hidden;
  height: 100%;  
} 
.cube {
  height: 200px;
  width: 200px;
  position: absolute;
  -webkit-transform-style: preserve-3d;
}
.cube div {
  position: absolute;
}
.top {
  width: 200px;
  height: 200px;
}
.front {
  width: 200px;
  top: 100%;
  left: 0; 
  -webkit-transform-origin: 0 0;
  -webkit-transform: rotateX(90deg);
}
.back {
  width: 200px;
  top: 0;
  left: 0; 
  -webkit-transform-origin: 0 0;
  -webkit-transform: rotateX(90deg);
}
.bottom {
  width: 200px;
  height: 200px;
  top: 0;
  left: 0; 
  -webkit-transform-origin: 0 0;
}
.right {
  height: 200px;
  top: 0;
  left: 100%; 
  -webkit-transform-origin: 0 0;
  -webkit-transform: rotateY(-90deg);
}
.left {
  height: 200px;
  top: 0; 
  left: 0;  
  -webkit-transform-origin: 0 0;
  -webkit-transform: rotateY(-90deg);
}
#codepen { 
  -webkit-transform: rotateX(52deg) rotateZ(54deg) scale(1); 
  -webkit-animation: codepen 2.8s cubic-bezier(.5,0,.95,1) forwards 0s;   opacity: 0;
  z-index: 1;
}
@-webkit-keyframes codepen {
  0%?{
    opacity: 0;
  }
  30% {
    opacity:1;  
    -webkit-transform: rotateX(52deg) rotateZ(54deg) scale(1); 
  }
  100% { 
    opacity: 0;
    -webkit-transform: rotateX(62deg) rotateZ(-1760deg) scale(1); 
  } 
}
#codepen div {
  box-shadow: inset #ccc 0 0 0 1px;
}
#codepen .top {
  -webkit-transform: translateZ(120px); 
}
#codepen .front,
#codepen .back {
  height: 120px;
}
#codepen .right,
#codepen .left { 
  width: 120px;
}
#cake { 
  position: absolute; 
  top: calc(50% - 60px);
  left: calc(50% - 110px); 
  perspective: 700px;
  -webkit-transform: rotate(-4deg);
}   
#first-floor {
  -webkit-transform: rotateX(52deg) rotateZ(54deg);      
  -webkit-animation: first 2.8s cubic-bezier(.5,0,.95,1) forwards 0s; 
  opacity: 0;
}
@-webkit-keyframes first {  
  30% {
    opacity:0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateX(62deg) rotateZ(-1760deg);
  }
}
#first-floor div {
  background-image: url(http://antimatter15.com/wp/wp-content/uploads/2011/08/noise-150x150.png);
  background-color: rgb(241, 194, 110);
}
#first-floor .top {
  -webkit-transform: translateZ(20px); 
}
#first-floor .bottom {
  box-shadow: rgba(0,0,0,.4) 0 0 4px; 
}
#first-floor .front {
  height: 20px;
  box-shadow: inset rgb(150, 101, 13) -5px 1px 1px -4px, inset rgba(0,0,0,0.3) 0 0 9px;
}
#first-floor .back {
  height: 20px;
}
#first-floor .right { 
  width: 20px;
  background: rgb(150, 101, 13); 
}
#first-floor .left { 
  width: 20px; 
}
#second-floor {  
  -webkit-transform: rotateX(52deg) rotateZ(54deg) translateZ(20px);   
  -webkit-animation: second 2.8s cubic-bezier(.5,0,.95,1) forwards 0s;
  opacity: 0;  
} 
@-webkit-keyframes second {  
  30% {
    opacity:0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateX(62deg) rotateZ(-1760deg) translateZ(20px);
  }
}
#second-floor div {
  background: #fff;
}
#second-floor .top {
  background: #FFFFFF;
  -webkit-transform: translateZ(50px)
}
#second-floor .bottom {}
#second-floor .front {
  height: 50px;  
  box-shadow: inset #D5CCBB -1px 0 2px, inset #D5CCBB 0 0 10px;
}
#second-floor .back { 
  height: 50px;
}
#second-floor .right {
  background: #D5CCBB;
  width: 50px;
}  
#second-floor .left { 
  width: 50px;  
}   
#third-floor {
  -webkit-transform: rotateX(52deg) rotateZ(54deg) translateZ(70px) scaleZ(1) scaleX(1) scaleY(1); 
  -webkit-animation: third 5.6s cubic-bezier(.5,0,.95,1) forwards 0s;    
  opacity: 0;  
}
@-webkit-keyframes third {
  30% {
    opacity:0;
  }
  40% { 
    opacity: 1; 
  }
  50% { 
    -webkit-transform: rotateX(62deg) rotateZ(-1760deg) translateZ(70px) scaleZ(.9) scaleX(1) scaleY(1);
  }
  52%, 56%, 60%, 64% {
    -webkit-transform: rotateX(62deg) rotateZ(-1760deg) translateZ(70px) scaleZ(1.2) scaleX(1) scaleY(1);
  }
  54%, 58%, 62%, 66% {
    -webkit-transform: rotateX(62deg) rotateZ(-1760deg) translateZ(70px) scaleZ(.95) scaleX(1.05) scaleY(1.05);
  }
  68%, 72%, 76%, 80% {
    -webkit-transform: rotateX(62deg) rotateZ(-1760deg) translateZ(70px) scaleZ(1.1) scaleX(1) scaleY(1); 
  }
  70%, 74%, 78%, 82% { 
    -webkit-transform: rotateX(62deg) rotateZ(-1760deg) translateZ(70px) scaleZ(.98) scaleX(1.02) scaleY(1.02);
  }
  84%, 88%, 92%, 96% {
    -webkit-transform: rotateX(62deg) rotateZ(-1760deg) translateZ(70px) scaleZ(1.01) scaleX(1) scaleY(1); 
  }
  86%, 90%, 94%, 98% { 
    -webkit-transform: rotateX(62deg) rotateZ(-1760deg) translateZ(70px) scaleZ(.99) scaleX(1.01) scaleY(1.01);
  }
  100% {
    -webkit-transform: rotateX(62deg) rotateZ(-1760deg) translateZ(70px) scaleZ(1) scaleX(1) scaleY(1);
    opacity: 1;
  } 
}
#third-floor div {  
  background: red;
  opacity: .6; 
}
#third-floor .top {
  background: -webkit-linear-gradient(top,rgba(255, 0, 0, 0.48),rgba(218, 0, 0, 0.84));
box-shadow: inset rgba(255,255,255,0.7) 1px -3px 7px 3px;
  -webkit-transform: translateZ(50px);
}
#third-floor .bottom {
  background: #ED4221;
}
#third-floor .front {
  height: 50px;
  background: -webkit-linear-gradient(bottom, red, red 40%, rgb(255, 100, 100) 41%, rgb(255, 100, 100));
box-shadow: inset rgba(255,255,255,0.7) 0px -1px 5px 1px, inset red 0px -4px 2px 4px,inset #720000 21px 15px 20px -20px;
}
#third-floor .back {
  height: 50px;
}
#third-floor .right {
  width: 50px;
  background: -webkit-linear-gradient(right, rgb(206, 1, 1), rgb(194, 1, 1) 40%, rgb(236, 0, 0) 46%, rgb(241, 12, 12));
box-shadow: inset rgba(255,255,255,0.7) -3px -6px 16px,inset #720000 21px 7px 20px -20px;
}
#third-floor .left {
  width: 50px;
  background: rgb(226, 40, 40);	
}
#shadow {
  width: 200px;
  height: 250px; 
  position: absolute;  
  top: 0px;
  left: 0;  
  background: -webkit-linear-gradient(left,rgba(0,0,0,0) 57%, rgba(0,0,0,0.2) 41%,rgba(0,0,0,0));
  -webkit-transform: scaleX(1.4) rotateX(62deg) rotateZ(15deg) translate3d(26px,-26px,0px);
  opacity: 0;
 -webkit-animation: shadow 5.6s cubic-bezier(.5,0,.5,1.1) forwards 0s;   
} 
@-webkit-keyframes shadow { 
  47% {
    opacity: 0; 
  }
  54% {
    opacity:1; 
  }
  100% {
    opacity:1; 
  }
}
#candles #front {  
  font-size: 90px;
  width: 200px; 
  height: 200px;
  -webkit-transform: translate3d(10px,-90px,10px) rotateX(62deg) rotateZ(43deg) rotateX(0); 
  color: #fff;
  position: absolute; 
  -webkit-animation: candles-front 5.6s cubic-bezier(.5,0,.5,1.1) forwards 0s;
  opacity: 0;
  text-shadow: 
    0px 0px 0 rgb(231,231,231),
    1px -1px 0 rgb(216,216,216),
    2px -2px 0 rgb(202,202,202),
    3px -3px 0 rgb(187,187,187),
    4px -4px 0 rgb(173,173,173),
    5px -5px 0 rgb(158,158,158), 
    6px -6px 0 rgb(144,144,144), 
    rgba(0,0,0,0.4) 2px 0px 5px;
} 
@-webkit-keyframes candles-front {
  50% { 
    opacity:0;
    -webkit-transform: translate3d(10px,-85px,10px) rotateX(62deg) rotateZ(43deg) rotateX(0deg); 
  }
  52%, 56%, 60%, 64% {
    -webkit-transform: translate3d(12px,-95px,10px) rotateX(62deg) rotateZ(43deg) rotateX(-90deg); 
    opacity: 1; 
  }
  54%, 58%, 62%, 66% {
    -webkit-transform: translate3d(10px,-87px,10px) rotateX(62deg) rotateZ(43deg) rotateX(-90deg); 
  }
  68%, 72%, 76%, 80% {
    -webkit-transform: translate3d(12px,-92px,10px) rotateX(62deg) rotateZ(43deg) rotateX(-90deg);  
  }
  70%, 74%, 78%, 82% { 
    -webkit-transform: translate3d(10px,-89px,10px) rotateX(62deg) rotateZ(43deg) rotateX(-90deg);  
  }
  84%, 88%, 92%, 96% {
    -webkit-transform: translate3d(11px,-91px,10px) rotateX(62deg) rotateZ(43deg) rotateX(-90deg); 
  }
  86%, 90%, 94%, 98% { 
    -webkit-transform: translate3d(10px,-89px,10px) rotateX(62deg) rotateZ(43deg) rotateX(-90deg); 
  }
  100% {
    -webkit-transform: translate3d(10px,-90px,10px) rotateX(62deg) rotateZ(43deg) rotateX(-90deg); 
    opacity: 1;
  } 
}
div#front:after {
  content: '';
  width: 3px;
  height: 19px;
  background: rgb(173, 173, 173);
  display: block;
  position: absolute;
  top: 1px;
  left: 29px;
}
#candles #reflection {
  font-size: 90px;
  width: 200px;
  height: 200px;
  -webkit-transform: translate3d(10px,-100px,10px) rotateX(62deg) rotateZ(43deg) rotateX(-90deg) scale(1,-1);
  color: #fff;
  position: absolute;
  -webkit-animation: candles-reflection 5.6s cubic-bezier(.5,0,.5,1.1) forwards 0s;
  text-shadow: 
    0px 0px 0 rgb(231,231,231),
    1px 1px 0 rgb(216,216,216),
    2px 2px 0 rgb(202,202,202),
    3px 3px 0 rgb(187,187,187),
    4px 4px 0 rgb(173,173,173),
    5px 5px 0 rgb(158,158,158), 
    6px 6px 0 rgb(144,144,144);
  opacity: 0;
}
@-webkit-keyframes candles-reflection {
  50% { 
    opacity:0;
    -webkit-transform: translate3d(10px,-95px,10px) rotateX(62deg) rotateZ(43deg) rotateX(-90deg) scale(1,-1);
  }
  52%, 56%, 60%, 64% {
    -webkit-transform: translate3d(10px,-105px,10px) rotateX(62deg) rotateZ(43deg) rotateX(-90deg) scale(1,-1);
    opacity: .1; 
  }
  54%, 58%, 62%, 66% {
    -webkit-transform: translate3d(10px,-97px,10px) rotateX(62deg) rotateZ(43deg) rotateX(-90deg) scale(1,-1);
  }
  68%, 72%, 76%, 80% {
    -webkit-transform: translate3d(10px,-102px,10px) rotateX(62deg) rotateZ(43deg) rotateX(-90deg) scale(1,-1);
  }
  70%, 74%, 78%, 82% { 
    -webkit-transform: translate3d(10px,-99px,10px) rotateX(62deg) rotateZ(43deg) rotateX(-90deg) scale(1,-1); 
  }
  84%, 88%, 92%, 96% {
    -webkit-transform: translate3d(10px,-101px,10px) rotateX(62deg) rotateZ(43deg) rotateX(-90deg) scale(1,-1);
  }
  86%, 90%, 94%, 98% { 
    -webkit-transform: translate3d(10px,-99px,10px) rotateX(62deg) rotateZ(43deg) rotateX(-90deg) scale(1,-1);
  }
  100% {
    -webkit-transform: translate3d(10px,-100px,10px) rotateX(62deg) rotateZ(43deg) rotateX(-90deg) scale(1,-1); 
    opacity: .1;
  } 
}
#flame {
  -webkit-transform: scale(0);
  -webkit-animation: flame .3s ease-in 3s forwards;
  -webkit-transform-origin: 60px -80px;
}
@-webkit-keyframes flame {
  100% {
    -webkit-transform: scale(1)
  }
}
#flame span {
  -webkit-animation: animate .4s linear infinite 0s;
  position: absolute;
background: rgba(94, 184, 255, 0.2);
width: 40px;
height: 30px;
border-radius: 0px 120px 0px 120px;
-webkit-transform:translate3d(25px,-155px,0px) rotate(45deg) scale(2);
box-shadow: inset #FFFEDB 10px 10px 15px 5px, inset white 10px 10px 13px,#E2E1CA -3px -3px 22px;
left: 9px;
}
@-webkit-keyframes animate {
  50% {
    width:30px;
    left: 25px;
    -webkit-transform:translate3d(25px,-145px,0px) rotate(55deg) scale(2)
  }
}
#sticks {
  -webkit-transform: rotateX(52deg) rotateZ(54deg) scale(1); 
  -webkit-transform-style: preserve-3d;
}
#sticks span {
  width: 25px;
  height: 3px;
  position: absolute;
  border-radius: 18px;
  -webkit-transform: translate3d(0px,0px,600px) rotateZ(40deg);
  box-shadow: rgba(0, 0, 0, 0.1) 2px 1px 1px, inset rgba(0,0,0,0.2) 0 0 1px;
}
#sticks span:nth-child(1) { 
  background: rgb(20, 255, 0); 
  -webkit-animation: z1 .3s cubic-bezier(.5,0,.5,1.1) forwards 5s;
}
@-webkit-keyframes z1 {
  100% {
    -webkit-transform: translate3d(0px,0px,0px) rotateZ(40deg);
  }
}
#sticks span:nth-child(2) { 
  background: rgb(245, 255, 0);
  -webkit-animation: z2 .3s cubic-bezier(.5,0,.5,1.1) forwards 5.2s;
}
@-webkit-keyframes z2 {
  100% {
    -webkit-transform: translate3d(50px,-40px,0px) rotateZ(40deg); 
  }
}
#sticks span:nth-child(3) { 
  background: rgb(255, 134, 168); 
  -webkit-animation: z3 4s ease-in-out forwards 6s;
  -webkit-transform: translate3d(144px,-99px,600px) rotateZ(40deg);
}
@-webkit-keyframes z3 {
  7% {
    -webkit-transform: translate3d(144px,-99px,0px) rotateZ(10deg) rotateY(40deg);
  }
  25% {
    -webkit-transform: translate3d(144px,-99px,0px) rotateZ(10deg) rotateY(0deg);
  }
  50% {
    -webkit-transform: translate3d(144px,-99px,0px) rotateZ(10deg) rotateY(30deg);
  }
  70% {
    -webkit-transform: translate3d(144px,-99px,0px) rotateZ(10deg) rotateY(0deg);
  }
  100% {
    -webkit-transform: translate3d(144px,-99px,0px) rotateZ(10deg) rotateY(20deg);
  }
}
#sticks span:nth-child(4) { 
  background: rgb(255, 255, 255); 
  -webkit-animation: z4 .3s cubic-bezier(.5,0,.5,1.1) forwards 5.5s;
}
@-webkit-keyframes z4 {
  100% {
    -webkit-transform: translate3d(110px,-50px,0px) rotateZ(-50deg);
  }
}
#sticks span:nth-child(5) { 
  background: rgb(253, 67, 67); 
  -webkit-animation: z5 .3s cubic-bezier(.5,0,.5,1.1) forwards 5.25s;
}
@-webkit-keyframes z5 {
  100% {
    -webkit-transform: translate3d(90px,-70px,0px) rotateZ(70deg);
  }
}
#sticks span:nth-child(6) { 
  background: rgb(0, 133, 255); 
  -webkit-animation: z6 .3s cubic-bezier(.5,0,.5,1.1) forwards 5.35s;
}
@-webkit-keyframes z6 {
  100% {
    -webkit-transform: translate3d(110px,-160px,0px) rotateZ(40deg);
  }
}
#sticks span:nth-child(7) { 
  background: rgb(245, 255, 0); 
  -webkit-animation: z7 .3s cubic-bezier(.5,0,.5,1.1) forwards 5.4s;
}
@-webkit-keyframes z7 {
  100% {
    -webkit-transform: translate3d(90px,-200px,0px) rotateZ(-90deg);
  }
}
#sticks span:nth-child(8) { 
  background: rgb(245, 255, 0); 
  -webkit-animation: z8 .3s cubic-bezier(.5,0,.5,1.1) forwards 5.15s;
}
@-webkit-keyframes z8 {
  100% {
    -webkit-transform: translate3d(50px,-40px,0px) rotateZ(40deg);
  }
}
#sticks span:nth-child(9) { 
  background: rgb(103, 224, 92); 
  -webkit-animation: z9 .3s cubic-bezier(.5,0,.5,1.1) forwards 5.22s;
}
@-webkit-keyframes z9 {
  100% {
    -webkit-transform: translate3d(120px,-90px,0px) rotateZ(40deg);
  }
}
#sticks span:nth-child(10) { 
  background: rgb(245, 255, 0); 
  -webkit-animation: z10 .4s cubic-bezier(.5,0,.5,1.1) forwards 5.47s;
}
@-webkit-keyframes z10 {
  100% {
    -webkit-transform: translate3d(180px,110px,-120px) rotateZ(290deg);
  }
}
#sticks span:nth-child(11) { 
  background: rgb(219, 228, 4); 
  -webkit-animation: z11 .4s cubic-bezier(.5,0,.5,1.1) forwards 5.07s;
}
@-webkit-keyframes z11 {
  100% {
    -webkit-transform: translate3d(220px,-81px,-120px) rotateZ(350deg);
  }
}
#sticks span:nth-child(12) { 
  background: rgb(103, 224, 92); 
  -webkit-animation: z12 .4s cubic-bezier(.5,0,.5,1.1) forwards 5.43s;
}
@-webkit-keyframes z12 {
  100% {
    -webkit-transform: translate3d(50px,80px,-120px) rotateZ(-10deg)
  }
}
#sticks span:nth-child(13) { 
  background: rgb(0, 133, 255); 
  -webkit-animation: z13 .4s cubic-bezier(.5,0,.5,1.1) forwards 5.33s;
}
@-webkit-keyframes z13 {
  100% {
    -webkit-transform: translate3d(90px,50px,-120px) rotateZ(370deg)
  }
}
#sticks span:nth-child(14) { 
  background: rgb(255, 134, 168); 
  -webkit-animation: z14 .4s cubic-bezier(.5,0,.5,1.1) forwards 5.21s;
}
@-webkit-keyframes z14 {
  100% {
    -webkit-transform: translate3d(190px,40px,-120px) rotateZ(0deg)
  }
}
#sticks span:nth-child(15) { 
  background: rgb(245, 255, 0); 
  -webkit-animation: z15 .4s cubic-bezier(.5,0,.5,1.1) forwards 5.57s;
}
@-webkit-keyframes z15 {
  100% {
    -webkit-transform: translate3d(40px,120px,-120px) rotateZ(290deg)
  }
}
#sticks span:nth-child(16) { 
  background: rgb(229, 58, 58); 
  -webkit-animation: z16 .4s cubic-bezier(.5,0,.5,1.1) forwards 5.21s;
}
@-webkit-keyframes z16 {
  100% {
    -webkit-transform: translate3d(210px,-80px,-120px) rotateZ(400deg)
  }
}
#sticks span:nth-child(17) { 
  background: rgb(253, 67, 67); 
  -webkit-animation: z17 .4s cubic-bezier(.5,0,.5,1.1) forwards 5.03s;
}
@-webkit-keyframes z17 {
  100% {
    -webkit-transform: translate3d(60px,110px,-120px) rotateZ(330deg)
  }
}
#sticks span:nth-child(18) { 
  background: rgb(0, 133, 255); 
  -webkit-animation: z18 .4s cubic-bezier(.5,0,.5,1.1) forwards 5.39s;
}
@-webkit-keyframes z18 {
  100% {
    -webkit-transform: translate3d(220px,-230px,-120px) rotateZ(340deg)
  }
}
#sticks span:nth-child(19) { 
  background: rgb(0, 133, 255); 
  -webkit-animation: z19 .4s cubic-bezier(.5,0,.5,1.1) forwards 5.44s;
}
@-webkit-keyframes z19 {
  100% {
    -webkit-transform: translate3d(270px,-80px,-120px) rotateZ(370deg)
  }
}
#sticks span:nth-child(20) { 
  background: rgb(255, 134, 168); 
  -webkit-animation: z20 .4s cubic-bezier(.5,0,.5,1.1) forwards 5.16s;
}
@-webkit-keyframes z20 {
  100% {
    -webkit-transform: translate3d(-70px,50px,-120px) rotateZ(-50deg)
  }
}
#sticks span:nth-child(21) { 
  background: rgb(255, 134, 168); 
  -webkit-animation: z21 .4s cubic-bezier(.5,0,.5,1.1) forwards 5.22s;
}
@-webkit-keyframes z21 {
  100% {
    -webkit-transform: translate3d(10px,90px,-120px) rotateZ(-30deg)
  }
}
#sticks span:nth-child(22) { 
  background: rgb(229, 238, 3); 
  -webkit-animation: z22 .4s cubic-bezier(.5,0,.5,1.1) forwards 5.35s;
}
@-webkit-keyframes z22 {
  100% {
    -webkit-transform: translate3d(240px,-120px,-120px) rotateZ(370deg)
  }
}
#sticks span:nth-child(23) { 
  background: rgb(230, 230, 230); 
  -webkit-animation: z23 .4s cubic-bezier(.5,0,.5,1.1) forwards 5.53s;
}
@-webkit-keyframes z23 {
  100% {
    -webkit-transform: translate3d(200px,-170px,-120px) rotateZ(340deg)
  }
}
#sticks span:nth-child(24) { 
  background: rgb(253, 67, 67); 
  -webkit-animation: z24 .4s cubic-bezier(.5,0,.5,1.1) forwards 5.31s;
}
@-webkit-keyframes z24 {
  100% {
    -webkit-transform: translate3d(222px,0px,-120px) rotateZ(400deg)
  }
}
#sticks span:nth-child(25) { 
  background: rgb(103, 224, 92); 
  -webkit-animation: z25 .4s cubic-bezier(.5,0,.5,1.1) forwards 5.1s;
}
@-webkit-keyframes z25 {
  100% {
    -webkit-transform: translate3d(272px,-20px,-120px) rotateZ(390deg)
  }
}
#sticks span:nth-child(26) { 
  background: #FFF; 
  -webkit-animation: z26 .4s cubic-bezier(.5,0,.5,1.1) forwards 5.32s;
}
@-webkit-keyframes z26 {
  100% {
    -webkit-transform: translate3d(-11px,80px,-120px) rotateZ(340deg)
  }
}
#sticks span:nth-child(27) { 
  background: #fff; 
  -webkit-animation: z27 .3s cubic-bezier(.5,0,.5,1.1) forwards 5.15s;
}
@-webkit-keyframes z27 {
  100% {
    -webkit-transform: translate3d(9px,-10px,0px) rotateZ(330deg)
  }
}
#sticks span:nth-child(28) { 
  background: rgb(0, 133, 255); 
  -webkit-animation: z28 .4s cubic-bezier(.5,0,.5,1.1) forwards 5.47s;
}
@-webkit-keyframes z28 {
  100% {
    -webkit-transform: translate3d(-1px,160px,-120px) rotateZ(330deg)
  }
}
#sticks span:nth-child(29) { 
  background: #fff; 
  -webkit-animation: z29 .4s cubic-bezier(.5,0,.5,1.1) forwards 5.5s;
}
@-webkit-keyframes z29 {
  100% {
    -webkit-transform: translate3d(59px,180px,-120px) rotateZ(350deg)
  }
}
#sticks span:nth-child(30) { 
  background: #fff; 
  -webkit-animation: z30 .3s cubic-bezier(.5,0,.5,1.1) forwards 5.09s;
}
@-webkit-keyframes z30 {
  100% {
    -webkit-transform: translate3d(29px,-60px,0px) rotateZ(330deg)
  }
}
#sticks span:nth-child(31) { 
  background: #fff; 
  -webkit-animation: z31 .4s cubic-bezier(.5,0,.5,1.1) forwards 5.43s;
}
@-webkit-keyframes z31 {
  100% {
    -webkit-transform: translate3d(265px,-10px,-120px) rotateZ(330deg)
  }
}
#sticks span:nth-child(32) { 
  background: rgb(0, 133, 255); 
  -webkit-animation: z32 .3s cubic-bezier(.5,0,.5,1.1) forwards 5s;
}
@-webkit-keyframes z32 {
  100% {
    -webkit-transform: translate3d(-31px,-30px,0px) rotateZ(300deg)
  }
}
#sticks2 {
  -webkit-transform: rotateX(52deg) rotateZ(54deg) scale(1); 
  -webkit-transform-style: preserve-3d;
}
#sticks2 span {
  width: 25px;
  height: 3px;
  position: absolute;
  border-radius: 18px;
  -webkit-transform: translate3d(0px,0px,600px) rotateZ(40deg);
  box-shadow: rgba(0, 0, 0, 0.1) 2px 1px 1px, inset rgba(0,0,0,0.2) 0 0 1px;
}
#sticks2 span:nth-child(1) { 
  background: rgb(20, 255, 0); 
  -webkit-animation: z-1 .3s cubic-bezier(.5,0,.5,1.1) forwards 5s;
}
@-webkit-keyframes z-1 {
  100% {
    translate3d(130px,-290px,-120px) rotateZ(40deg);
  }
}
#sticks2 span:nth-child(2) { 
  background: rgb(245, 255, 0);
  -webkit-animation: z-2 .3s cubic-bezier(.5,0,.5,1.1) forwards 5.2s;
}
@-webkit-keyframes z-2 {
  100% {
    -webkit-transform: translate3d(20px,-370px,-120px) rotateZ(40deg); 
  }
}
#sticks2 span:nth-child(3) { 
  background: rgb(255, 134, 168); 
  -webkit-animation: z-3 .3s cubic-bezier(.5,0,.5,1.1) forwards 5.3s;
}
@-webkit-keyframes z-3 {
  100% {
    -webkit-transform: translate3d(-70px,-310px,-120px) rotateZ(40deg);
  }
}
#sticks2 span:nth-child(4) { 
  background: rgb(255, 255, 255); 
  -webkit-animation: z-4 .3s cubic-bezier(.5,0,.5,1.1) forwards 5.5s;
}
@-webkit-keyframes z-4 {
  100% {
    -webkit-transform: translate3d(-190px,-200px,-120px) rotateZ(40deg);
  }
}
#sticks2 span:nth-child(5) { 
  background: rgb(253, 67, 67); 
  -webkit-animation: z-5 .3s cubic-bezier(.5,0,.5,1.1) forwards 5.25s;
}
@-webkit-keyframes z-5 {
  100% {
    -webkit-transform: translate3d(-140px,-90px,-120px) rotateZ(40deg);
  }
}
#sticks2 span:nth-child(6) { 
  background: rgb(0, 133, 255); 
  -webkit-animation: z-6 .3s cubic-bezier(.5,0,.5,1.1) forwards 5.45s;
}
@-webkit-keyframes z-6 {
  100% {
    -webkit-transform: translate3d(-180px,-170px,-120px) rotateZ(20deg);
  }
}
#sticks2 span:nth-child(7) { 
  background: rgb(245, 255, 0); 
  -webkit-animation: z-7 .3s cubic-bezier(.5,0,.5,1.1) forwards 5.5s;
}
@-webkit-keyframes z-7 {
  100% {
    -webkit-transform: translate3d(-130px,10px,-120px) rotateZ(-40deg);
  }
}
#sticks2 span:nth-child(8) { 
  background: rgb(245, 255, 0); 
  -webkit-animation: z-8 .3s cubic-bezier(.5,0,.5,1.1) forwards 5.15s;
}
@-webkit-keyframes z-8 {
  100% {
    -webkit-transform: translate3d(140px,-290px,-120px) rotateZ(40deg);
  }
}
#sticks2 span:nth-child(9) { 
  background: rgb(0, 133, 255); 
  -webkit-animation: z-9 .3s cubic-bezier(.5,0,.5,1.1) forwards 5.55s;
}
@-webkit-keyframes z-9 {
  100% {
    -webkit-transform: translate3d(-110px,-50px,-120px) rotateZ(-50deg);
  }
}
#sticks2 span:nth-child(10) { 
  background: rgb(94, 206, 83); 
  -webkit-animation: z-10 .3s cubic-bezier(.5,0,.5,1.1) forwards 5.05s;
}
@-webkit-keyframes z-10 {
  100% {
    -webkit-transform: translate3d(150px,-250px,-120px) rotateZ(-50deg);
  }
}
#text {
  font-size: 33px;
  color: #fff;
  text-shadow: rgba(0, 0, 0, 0.23) 1px 1px 2px;
  position: absolute;
  left: 0;
  bottom: 30px;
  z-index: 20;
  width: 100%;
  opacity: 0;
  -webkit-transform: scale(.8);
  text-align: center;
  -webkit-animation: text .6s cubic-bezier(.5,0,.5,2) 6.5s forwards;
}
@-webkit-keyframes text {
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
}

HTML

超有型的三层蛋糕，还有点燃的蜡烛和五彩缤纷的果蜡。

编辑器支持Emmet

快捷键

超有型的三层蛋糕，还有点燃的蜡烛和五彩缤纷的果蜡。

HTML5/CSS3 旋转的3D上海金茂大厦

CSS3 旋转的一欧元硬币

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：