CSS

scss to css

/* You cannot use scss in an html file so the simplest 
solution is to use an online tool to convert scss to css*/
https://jsonformatter.org/scss-to-css

scss to css

/* Answer to: "scss to css" */

/*
  You can convert SCSS to CSS here:
  https://jsonformatter.org/scss-to-css

  Wanna convert it back? Google "css to scss" and see my answer there!
*/

scss to css

In Visual Studio Code use this extension: "Live Sass Compiler" 

scss to css

sass --watch style.scss style.css

scss to css

Use the "Live Sass Compiler" in Visual Studio Code

scss to css

.hover-fold{
  background: $yellow;
  border: 5px white solid;
  height: 310px;
  margin: 10px auto;
  @include perspective( 1500 );
  position: relative;
  width: 410px;
  h2{
    border-bottom: 1px solid #333;
    margin: 0 40px;
    padding: 110px 0 2px;
  }
  .top{
    height: 50%;
    @include transition(all .5s ease-out);
    @include transform( rotateX(0deg) );
    @include transform-origin( 0, 100% );
    @include transform-style( preserve-3d );
    position: absolute;
    top:0px;
    width: 100%;
    z-index: 10;
    .face{
      @include backface-visibility( hidden );
      position: absolute;
    }
  }
  &:hover .top{
    @include transform( rotateX(-180deg) );
  }
  .front{
    background: url(https://dribbble.s3.amazonaws.com/users/21389/screenshots/963288/2ormore_shirt.png);
    height: 100%; /*has to be 100% of .top */
    width: 100%;
  }
  .back{
    background: $yellow;
    height: 100%; /*has to be 100% of .top */
    padding: 0 40px;
    @include transform( rotateX(180deg) );
    width: 100%;
    p{
      margin: 0;
    }
  }
  .bottom{
    background: url(https://dribbble.s3.amazonaws.com/users/21389/screenshots/963288/2ormore_shirt.png) bottom;
    height: 50%;
    position: absolute;
    top: 50%;
    width: 100%;
    z-index: 0;
  }
}