1

I'm having a hard time figuring out perspective. I'm trying to make a windmill and instead of it looking flat, I'm trying to angle it like it's rotating 10 o'clock to 4 o'clock along with it looking like it's spinning from a center point.

.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>

https://jsfiddle.net/q2dLpay3/

Keith
  • 4,059
  • 2
  • 32
  • 56
  • First thing to do would be is to get those divs in a wrapper and position them properly so they have a *common center* – Paulie_D Sep 12 '19 at 15:35
  • Yeah getting that to start would help. I guess I need to start them at certain degrees – Keith Sep 12 '19 at 15:39
  • perspective need to be defined on the parent element or use `perspective()` inside the transform. Related: https://stackoverflow.com/a/51891547/8620333 / https://stackoverflow.com/a/54990493/8620333 / – Temani Afif Sep 12 '19 at 19:57

0 Answers0