sass question. transition of transform effect not applied - sass

Question

Can someone help me why transition doesn't get applied?
html
<div class="box">
<div class="box__faces">
<div class="box__faces--front">
FRONT
</div>
<div class="box__faces--back">
BACK
</div>
</div>
</div>
sass
.box
{
width: 500px;
height: 500px;
background: #eee;
&__faces
{
transition: all 0.8s ease; // this doesn't seem to be applied.
&--front
{
width:150px;
height:150px;
background: blue;
}
&--back
{
width:150px;
height:150px;
background: red;
transform: rotateY(180deg);
}
}
&__faces:hover &__faces--front
{
transform: rotateY(180deg);
}
&__faces:hover &__faces--back
{
transform: rotateY(0deg);
}
}
I have a working codepen here:
https://codepen.io/loganlee/pen/RwNJPdZ?editors=1100
I expect rotateY transform for both .box__faces--front and .box__faces--back to be transitioned and I placed transition on the parent element which in this case is .box__faces.
transition: all 0.8s ease; // this doesn't seem to be applied.
Thanks.

Answer 1

You have set transition on .box__faces class when you need to specify it on the &--front and &--back classes.
.box
{
width: 500px;
height: 500px;
background: #eee;
&__faces
{
&--front
{
width:150px;
height:150px;
background: blue;
transition: all 0.8s ease;
}
&--back
{
width:150px;
height:150px;
background: red;
transform: rotateY(180deg);
transition: all 0.8s ease;
}
}
&__faces:hover &__faces--front
{
transform: rotateY(180deg);
}
&__faces:hover &__faces--back
{
transform: rotateY(0deg);
}
}