cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">

<section class="container">
  <div class="card" id="theCard">
    <div class="page back">
      <div class="side back">Jobbies</div>
      <div class="side front">
        <div class="hearts">
          <div class="heart"></div>
          <div class="heart"></div>
          <div class="heart"></div>
          <div class="heart"></div>
          <div class="heart"></div>
          <div class="heart"></div>
          <div class="heart"></div>
        </div>
        
        <div>
        <p>Here are some CSS hearts for you</p>
        </div>
      </div>
    </div>
    <div class="page front">
      <div class="side back"></div>
      <div class="side front">
        <div>
          <p>Roses are <span class="red">red</span></p>
        <p>Violets are <span class="blue">blue</span></p>
        </div>
      </div>
    </div>
  </div>
</section>
            
          
!
            
              body{
  background: rgba(255,191,225,1);
  background: radial-gradient(ellipse at center, rgba(255,191,225,1) 0%, rgba(217,94,159,1) 100%);
}

.container {
  width: 200px;
  height: 300px;
  position: relative;
  perspective: 1000px;
  margin-left:47%;
  margin-top:5%;

  .card {
    width: 100%;
    height: 100%;
    position: absolute;
    transform:rotateX(30deg) rotateY(10deg);
    transform-style: preserve-3d;
    box-shadow: 10px 10px 35px -9px rgba(0,0,0,0.5);
    
    .page {
      margin: 0;
      width: 200px;
      height: 300px;
      display: block;
      position: absolute;
      transition:2s;
      transform-origin: 0% 50%;
      transform-style:preserve-3d;
      
      &.back {
        transform: rotateX( 0deg );
        > .front{
          box-shadow: inset 20px 0px 40px 0px rgba(0,0,0,0.2);
        }
      }
      &.front {
        transform: rotateY( 0deg ) translateZ( 3px );
        > .back{
          box-shadow: inset -20px 0px 40px 0px rgba(0,0,0,0.2);
        }
      }
      
      .side{
        backface-visibility:hidden;
        width:100%;
        height:100%;
        position:absolute;
        top:0;
        left:0;
        transform-style: preserve-3d;
        display: flex;
        align-items: center;
        justify-content: center;

        &.front{
          z-index:2;
        }
        
        &.back{
          transform: rotateY( 180deg );
        }
        
        p {
          text-align:center;
          padding:20px 20px;
          font-family: 'Tangerine', cursive;
          font-size:3em;
          font-weight:bold;
          color: #353535;
          line-height:0.8;
          letter-spacing:0;
          margin:0;
          
          .red{
            color: #990000;
            text-shadow: 0px 0px 11px #990000;
          }
          .blue{
            color: #005DA0;
            text-shadow: 0px 0px 11px #005DA0;
          }
        }
      }
    }
    
    &.open {
      > .front {
        transform: rotateY( -120deg );
      }
    }
  }
}

.hearts{
  position: absolute;
  width:100%;
  height:100%;
  opacity:0;
  transition:2s;
}
.heart{
  position:absolute;
  transform-style:preserve-3d;
  animation-iteration-count: infinite;
  width:30px;
  height:30px;
  opacity:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='-3 -1 16 16' preserveAspectRatio='xMidYMid meet'><path d='M5,12 C20,0 5,-2 5,3.5 C5,-2 -10,0 5,12 Z' fill='red' stroke='magenta' stroke-width='0'/></svg>");
  svg{
    fill: red;
  }
  
  &:nth-child(1) {
    margin-top:10%;
    margin-left:30%;
    animation-duration: 4s;
  }
  &:nth-child(2) {
    margin-top:70%;
    margin-left:60%;
    animation-duration: 7.5s;
  }
  &:nth-child(3) {
    margin-top:20%;
    margin-left:85%;
    animation-duration: 4.5s;
  }
  &:nth-child(4) {
    margin-top:80%;
    margin-left:20%;
    animation-duration: 3.5s;
  }
  &:nth-child(5) {
    margin-top:15%;
    margin-left:75%;
    animation-duration: 6s;
  }
  &:nth-child(6) {
    margin-top:90%;
    margin-left:30%;
    animation-duration: 5.5s;
  }
  &:nth-child(7) {
    margin-top:60%;
    margin-left:35%;
    animation-duration: 6.5s;
  }
  &:nth-child(8) {
    margin-top:80%;
    margin-left:35%;
    animation-duration: 3.5s;
  }
}

.open{
  .hearts{
    opacity:1;
  }
  .heart{
    animation-name: floatingClockwise;
      
    &:nth-child(even) {
      animation-name: floatingAntiClockwise;
    }
  }
}

@keyframes floatingClockwise {
  0% { transform:rotateX(-20deg) rotateY(-90deg) translateY(15px); opacity: 0.8; }
  100% { transform:rotateX(-20deg) rotateY(90deg) translateY(-120px); opacity: 0; } 
}

@keyframes floatingAntiClockwise {
  0% { transform:rotateX(-20deg) rotateY(90deg) translateY(25px); opacity: 0.8; }
  100% { transform:rotateX(-20deg) rotateY(-90deg) translateY(-120px); opacity: 0; } 
}

.side {
  background:url('data:image/png;base64,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');
}
            
          
!
            
              var card = document.getElementById('theCard');

function openCard() {
  setTimeout(function() {
    card.classList.toggle('open');
    
    setTimeout(function() {
      card.classList.toggle('open');
      openCard();
    }, 10000);
  }, 3000);  
}

openCard();
            
          
!
999px
Loading ..................

Console