动画透视

.card{
  background: green;
  width: 20px;
  height: 200px;
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin 4s linear infinite;
  transform-origin: bottom left;
  margin: 0px auto;
}
.card1{
  background: green;
  width: 20px;
  height: 200px;
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin 4s linear infinite;
  transform-origin: top left;
  margin: 0px auto;
  position: absolute;
  top: 190px;
  left: 48%;
  transform: skew(50deg);
}

.card2{
  background: green;
  width: 20px;
  height: 200px;
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin 4s linear infinite;
  transform-origin: top center;
  margin: 0px auto;
  position: absolute;
  top: 190px;
  left: 40%;
}
 
 @keyframes spin {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
    perspective: 20em;
	}
}

<div class='card'></div>
<div class='card1'></div>
<div class='card2'></div>