#dailycssimages 033

dailycssimages-033.markdown

#dailycssimages 033

Vue logo

A Pen by Adam Kuhn on CodePen.

License.

index.haml

.wrapper
 .triangle
  .front
  .back
  .left
  .right
  .bottom

style.scss

$g: #41b883;
$b: #35495e;

@-webkit-keyframes spin {
	0% { -webkit-transform: rotateY(0) rotateX(-15deg); }
	50% { -webkit-transform: rotateY(180deg) rotateX(15deg); }
  100%{ -webkit-transform: rotateY(360deg) rotateX(-15deg); }
}

body{
  height:100vh;
  width:100vw;
  background:radial-gradient(circle at center, lighten($b, 60%) 30%, $b 140%);
  .wrapper{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -100px;
      -webkit-perspective: 1000px;
      -webkit-perspective-origin: 50% 100px;
      transform:rotate(180deg) rotateY(30deg) translateY(60px);
    .triangle{
      	position: relative;
        width: 200px;
        -webkit-transform-style: preserve-3d;
        -webkit-animation: spin 7s infinite linear;
      div{
        position: absolute;
        border: 100px solid transparent;
        animation:shading 7s infinite linear;
        @keyframes shading{
          0%{
            filter:brightness(1);
          }
          50%{
            filter:brightness(0.6);
          }
          100%{
            filter:brightness(1);
          }
        }
        &:before{
          content:'';
          position:absolute;
          border:60px solid transparent;
          top:30px;
          left:-60px;
          border-bottom: 110px solid $b;
        }
        &:after{
          content:'';
          position:absolute;
          border:30px solid transparent;
          top:115px;
          left:-30px;
          border-bottom: 55px solid #fff;
        }
        
      }
      .bottom {
          width: 200px;
          height: 200px;
          border:0px solid;
          background: linear-gradient(to right, $g, $g 40px, $b 40px, $b 70px, #fff 70px, #fff 130px, $b 130px, $b 160px, $g 160px);
          -webkit-transform: rotateX(90deg) translateY(100px);
          -webkit-transform-origin: bottom center;
          top:-201px;
        &:before, &:after{
          display:none;
        }
        }
      .front{
        bottom: -20px;
        border-bottom: 200px solid $g;
	-webkit-transform: translateZ(25px) rotateX(30deg);
      }
      .back{
        bottom: -20px;
        border-bottom: 200px solid $g;
	      -webkit-transform: translateZ(-25px) rotateY(180deg) rotateX(30deg);
        animation-delay:3.5s;
      }
      .left{
        bottom: -20px;
        left: 75px;
        border-bottom: 200px solid $g;
        -webkit-transform: rotateY(270deg) translateX(-100px) rotateX(30deg);
        -webkit-transform-origin: center left;
        animation-delay:1.75s;
        &:before, &:after{
          display:none;
        }
      }
      .right{
        bottom: -40px;
        right: 150px;
        border-bottom: 200px solid $g;
        -webkit-transform: rotateY(-270deg) translateX(100px) rotateX(30deg);
        -webkit-transform-origin: top right;
        animation-delay:5.25s;
        &:before, &:after{
          display:none;
        }
      }

    }
  }
}