Skip to content

Instantly share code, notes, and snippets.

@AminAzGol

AminAzGol/jsbin.untitled.css

Created July 14, 2014 07:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save AminAzGol/1b3bd7767d1b54c07269 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save AminAzGol/1b3bd7767d1b54c07269 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. AminAzGol created this gist Jul 14, 2014.
    77 changes: 77 additions & 0 deletions jsbin.untitled.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,77 @@
    .parent3d{
    -webkit-perspective: 500px;
    }

    .parent{
    width: 300px;
    height: 400px;
    margin: 100px auto 0;
    width: 200px;
    height: 200px;
    position: relative;
    -webkit-transition: 2s;
    -webkit-transform-style: preserve-3d;
    }

    .parent:hover{
    -webkit-transform: rotateY(180deg);
    }

    .box1,
    .box2{
    width: inherit;
    height: inherit;
    font-size: 150px;
    line-height: 200px;
    text-align: center;
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.9;
    /* -webkit-backface-visibility: hidden; */
    }

    .box1{
    background-color: #114;
    }
    .box2{
    background-color: #411;
    -webkit-transform: rotateY(180deg) translateZ(20px);
    }

























    /* footer author link */
    .alimd{
    position: fixed;
    right: 10px;
    bottom: 10px;
    text-decoration: none;
    color: rgba(0,0,0,0.5);
    }
    .alimd:hover{
    color: #222;
    }
    21 changes: 21 additions & 0 deletions jsbin.untitled.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Ali.MD Tutorial</title>
    <meta name="description" content="An AliMD Web Technologies Tutorial" />
    <meta name="author" content="Ali Mihandoost" />
    </head>
    <body>
    <div class="parent3d">
    <div class="parent">
    <div class="box2">B</div>
    <div class="box1">A</div>
    </div>
    </div>


    <!-- footer author link -->
    <a class="alimd" href="http://ali.md" title="Ali Mihandoost">by ali.md</a>
    </body>
    </html>