<head>
  <title>kurutto</title>
</head>
<body>
  <div class="wrap">
    <p class="rotateX">rotateX()ホバーで縦に回転します。</p>
    <p class="rotateY">rotateY()ホバーで横に回転します。</p>
    <p class="rotateZ">rotateZ()ホバーで時計周りに回転します。</p>
  </div>
</body>
.wrap{
  width:300px;
  margin: 0 auto;
  padding: 20px;
  background:#dfdfdf ;
}

p{
  padding: 20px 10px;
  background: #999;
  margin-bottom: 20px;
  transition: 1s ;
  font-size:14px;
}

.rotateX:hover{
  transform:rotateX(180deg) ;
}

.rotateY:hover{
  transform:rotateY(180deg) ;
}

.rotateZ:hover{
  transform:rotateZ(180deg) ;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.