codehaven - php snippets - coding help
Generic filters
Exact matches only
    • octopus energy discount code

    Flip Div using Css3

    7th February 2015

    CSS

    Css - Codehaven

    When hovering over an image it will use the CSS to implement an image flip.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
     
    <div id="f1_container">
    <div id="f1_card" class="shadow">
      <div class="front face">
        <img src="http://www.lolcats.com/images/u/07/32/lolcatsdotcomclu5vrpst727hzii.jpg"/>
      </div>
      <div class="back face center">
        <img src="http://www.lolsnaps.org/wp-content/uploads/2012/07/funny-cat-relax.jpg">
      </div>
    </div>
    </div>
     
     
    #f1_container {
      position: relative;
      margin: 10px auto;
      width: 450px;
      height: 330px;
      z-index: 1;
    }
    #f1_container {
      perspective: 1000;
    }
    #f1_card {
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transition: all 1.0s linear;
    }
    #f1_container:hover #f1_card {
      transform: rotateY(180deg);
      box-shadow: -5px 5px 5px #aaa;
    }
    .face {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
    }
    .face.back {
      display: block;
      transform: rotateY(180deg);
      box-sizing: border-box;
      padding: 10px;
      color: white;
      text-align: center;
      background-color: #aaa;
    }
     

    Was this code snippet helpful?

    RSS Latest Snippets
    LINKS
    A Repository of Code Snippets in many Programming Languages:-

    PHP – JQUERY
    CSS – MYSQL
    WORDPRESS – JAVASCRIPT
    WOOCOMMERCE – HTML

    © 2022 CODEHAVEN