Sass 萨斯的问题。未应用变换效果的转换

有人能帮我解释为什么过渡不适用吗

html

我这里有一个工作代码笔：

我希望对.box\uu面（前面和.box\uu面）和.box\uu面（后面）进行旋转变换，然后我将变换放置在父元素上，在本例中，父元素是.box\uu面

transition: all 0.8s ease;    // this doesn't seem to be applied.

---

谢谢。

您已经在

上设置了
transition
。当您需要在
&--front
和
&--back
类上指定它时，box\uu将面向

类

.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);
  }
}

transition: all 0.8s ease;    // this doesn't seem to be applied.

.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);
  }
}