A CodePen by elleestcrimi. Pink Present - Just a present box that opens

index.haml

.box
    .side
    .side
    .side
    .side
    .side
    .side
        .lid
            .front
            .back
        .lid
            .front
            .back

style.sass

@import "compass"
html
  background: #333
  
.box
  position: absolute
  transform-origin: center center
  transform-style: preserve-3d
  transform: perspective(1000px) rotateX(-25deg) rotateY(-60deg)
  margin: auto
  height: 100px
  width: 100px
  top: 0
  bottom: 0
  left: 0
  right: 0
  &:hover
    .side:nth-child(6)
      .lid:nth-child(1)
        transform: rotateY(-220deg)
      .lid:nth-child(2)
        transform: rotateY(220deg)
          
.side
  background: rgb(218, 17, 89)
  box-shadow: 0 0 0 1px rgba(0,0,0,0.2)
  width: 100px
  height: 100px
  position: absolute
  transform-origin: center center
  border-radius: 2px
  transform-style: preserve-3d   
  &:before
    width: 20px   
    background: #fafafa
    content: ' '
    margin: auto
    position: absolute
    top: 0px
    bottom: 0
    left: 0
    right: 0
    box-shadow: 0 0 0 1px rgba(0,0,0,0.2)
    z-index: 10
    
  &:nth-child(1)
    transform-origin: bottom center
    transform: rotateX(0deg) translateZ(50px)
    
  &:nth-child(2)
    transform-origin: bottom center
    transform: rotateX(0deg) translateZ(-50px)
      
  &:nth-child(3)
    transform-origin: bottom center
    transform: rotateY(90deg) translateZ(50px)  
    
  &:nth-child(4)
    transform-origin: bottom center
    transform: rotateY(90deg) translateZ(-50px)
      
  &:nth-child(5)
    transform: rotateX(-90deg) translateZ(50px)  
      
  &:nth-child(6)
    background: transparent
    box-shadow: 0 0 0
    transform: rotateX(90deg) translateZ(50px) 
    &:before
      content: none
    .lid
      background: rgb(218, 17, 89)
      position: absolute
      top: 0
      bottom: 0
      left: 0
      right: 50px
      transform-origin: left center
      box-shadow: 0 0 0 1px rgba(0,0,0,0.2)
      transition-property: transform  
      transition-duration: 0.5s
      transition-timing-function: ease
      transition-delay: 0s
      z-index: 10
      &:before
        content: ' '
        position: absolute
        right: 0
        left: 0
        top: 0
        bottom: 0
        height: 20px
        background: #fafafa
        margin: auto
        box-shadow: 0 0 0 1px rgba(0,0,0,0.2)
      &:after
        content: ' '
        position: absolute
        right: 0
        top: 0
        bottom: 0
        width: 10px
        background: #fafafa
      &:nth-child(2)
        transform-origin: right center
        right: 0
        left: 50px
        &:after
          left: 0
               
@keyframes fadeIn
  from
    opacity: 0
  to 
    opacity: 1

@keyframes openAndCloseLeft
  from
    transform: rotateY(-220deg)
  to
    transform: rotateY(0deg)
    
@keyframes openAndCloseRight
  from
    transform: rotateY(220deg)
  to
    transform: rotateY(0deg)
    
.box
  opacity: 0
  animation: fadeIn 0.6s ease 0.3s
  animation-fill-mode: both
  .side:nth-child(6)
    .lid:nth-child(1)
      animation: openAndCloseLeft 0.6s ease 0.9s
      animation-fill-mode: both
    .lid:nth-child(2)
      animation: openAndCloseRight 0.6s ease 0.9s
      animation-fill-mode: both