Animation How to - Create iOS 5 Notification Animation

Question

We would like to know how to create iOS 5 Notification Animation.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
div {<!--from  w ww.  j ava2  s .  c  o m-->
    width: 100px;
    height: 30px;
    position: relative;
    -webkit-backface-visibility: hidden;
    -webkit-transition: -webkit-transform 1s ease;
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50% -15px;
}
div:hover {
    -webkit-transform: rotateX(90deg);
}
span {
    background-color: blue;
    display: block;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    padding: 5px;
    -webkit-backface-visibility: hidden;
}
span:last-child {
    background-color: navy;
    -webkit-transform: rotateX(-90deg) translate3d(0,15px,15px);
}
  </style>
</head>
<body>
  <div>
    <span>Front</span>
    <span>Bottom</span>
</div>
</body>
</html>

The code above is rendered as follows: