CSS3 3d Effect

123456781234567812345678

$color: Red, yellow, blue, green, gray, black, purple, orange;@-webkit-keyframes move{0% {Transform:Rotatey (0deg); }100%{Transform:Rotatey (360deg); }}body{padding:200px;@at-root. Content {Width:500px;Height:500px;margin:-350px Auto;Border:1px solid Transparent;position:relative;-webkit-perspective:500px;-webkit-perspective-origin:Center 100px;@for $i from 1 to ten &:Nth-of-type (#{$i}) {Z-index:10-$i}}. Main{width:100px;Height:100px;margin:200px Auto;position:relative;Transform-style:preserve-3d;Animation:Move 8s Linear infinite;div {width:100px;Height:100px;position:Absolute;Bottom:0;font-size:100px;Color: White;text-align:Center;Line-height:100px;Transform-style:preserve-3d;@for $i from 1 to 9 {&:Nth-of-type (#{$i}) {background:Nth ($color, $i);Transform:Rotatey (45deg * $i) Translatez (150px); }}}}}  

<! DOCTYPE html>

CSS3 3d Effect