Search code examples
css3drotationflipperspective

Flip circle with 3d perspective

I have 3 circles one for front view ( exclamation - green ) one for backing the view of both front and back ( circle - red ) one for the back view (stop - back )

Here is a little snippet https://jsfiddle.net/modo9grp/

I have tilted the whole thing to show what I need but at the end I will use only the rotateY. So this is what I would like to create, again I have exajerated a bit the perspective, but the green need to be on top, the red in the middle and the blue at the back.

Expecting result, when I use rotateY the whole circle should flip and the blue circle must be fully visible, when rotateY reachs 180deg.

enter image description here

Also bonus, I would like to add a little thickness to this, so I don't know maybe I have to add 2 red circles one for the front and another one for the blue.

What do you think ?

<div class='rewardIcon'>
  <div class='contIcon'>
  <span class='fa fa-stop-circle'></span>
  </div>
   <div class='contIcon'>
  <span class='fa fa-circle'></span>
  </div>
   <div class='contIcon'>
  <span class='fa fa-exclamation-circle'></span>
  </div>
</div>

.rewardIcon{
  position:absolute;
  transform: rotateX(50deg) rotateY(140deg);
  transform-style: preserve-3d;
  left:200px
}

.contIcon{
  position:absolute;
  font-size:160px;

  transform-style: preserve-3d;
}

.fa-stop-circle{
  color:blue;
}

.fa-circle{
  color:red;
}

.fa-exclamation-circle{
  color:green;
}
Solution

  • Here is an update

    https://jsfiddle.net/modo9grp/2/

    but if anyone has an idea on how to make a rim around the circles, do not hesitate.

    thanks

    I had to add

    transform-origin: center center; /*on the main container*/
transform: translateX(-50%);/*on the icon container*/
transform:translateZ(1px);/*on the icons*/