CSS3 3D Transform #2

by mrienstra

HTML

<!DOCTYPE html>
<html>
<body>
  <div id="view3d">
    <div id="nested3dContainer">
      <p>And so the text seems to lift off the page and float, as if transformed.
Well, I suppose it is transformed, and that explains the appearance,
if not quite the magic, of it...</p>
    </div>
  </div>
</body>
</html>

CSS

@-webkit-keyframes raise {
  0% {
    -webkit-transform: rotateX(0deg) translateY(0px) translateZ(0px);
  }
  50% {
    -webkit-transform: translateZ(25px);
  }
  100% {
    -webkit-transform: rotateX(-60deg) rotateY(35deg) rotateZ(-11deg) translateY(-70px) translateZ(100px);
  }
}

#view3d {
  -webkit-perspective: 500;
  -webkit-transform-style: preserve-3d;
  margin: 75px;
}

#nested3dContainer {
  -webkit-transform-style: preserve-3d;
  -webkit-transform: rotateX(45deg) rotateZ(30deg);
  width: 200px;
  border: 1px solid #ddd;
  background: #dfdfdf;
  padding: 5px;
}

#nested3dContainer p {
  -webkit-transform-origin: 50% 0%;
  background: #fff;
  padding: 5px;
}

#nested3dContainer:hover p, #nested3dContainer.hover p  {
  -webkit-animation: raise 2s;
  -webkit-transform: rotateX(-60deg) rotateY(35deg) rotateZ(-11deg) translateY(-70px) translateZ(100px);
}