Animation How to - Create CSS3 3D rotation animation

Question

We would like to know how to create CSS3 3D rotation animation.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
@keyframes spin {from { transform:rotateY(360deg);
  -ms-transform: rotateY(360deg); /* IE 9 */
  -webkit-transform: rotateY(360deg); /* Opera, Chrome, and Safari */
}}<!--  www  . ja  v a  2  s .  com-->
@-ms-keyframes spin {from { transform:rotateY(360deg);
  -ms-transform: rotateY(360deg); /* IE 9 */
  -webkit-transform: rotateY(360deg); /* Opera, Chrome, and Safari */
}}
@-webkit-keyframes spin {from { transform:rotateY(360deg);
  -ms-transform: rotateY(360deg); /* IE 9 */
  -webkit-transform: rotateY(360deg); /* Opera, Chrome, and Safari */
}}
.logo {
  text-align: center;
  font-size: 140px;
  line-height: 140px;
}

.char {
  animation: spin 5s infinite;
  -ms-animation: spin 5s infinite;
  -webkit-animation: spin 5s infinite;
}
</style>
</head>
<body>
  <div class="logo">
    <div class="char">Java2s.com</div>
  </div>
</body>
</html>

The code above is rendered as follows: