如何"；反向；给定的CSS3转换？

在AngularJS的ng show/ng hide指令的文档中，我发现了CSS3转换和转换带来的良好视觉效果：

（参见本页最底部的示例或转到以下链接）

HTML:

作为一名AngularJS开发人员，我了解它的基本工作原理，但作为一名CSS转换新手，当我试图修改给定的工作示例时，我遇到了麻烦

我正在努力实现的目标：

修改“隐藏动画”（.funky-show-hide.ng-hide-add和.funky show hide.ng hide add.ng hide add活动），使视觉效果与“显示动画”相反

经过一些尝试和错误，我得出了以下结论：

.funky-show-hide.ng-hide-add {
  transform: rotateY(0);
  transform-origin: left;
  transition: all 0.5s ease-out;
}

.funky-show-hide.ng-hide-add.ng-hide-add-active {
  transform: rotateY(180deg);
}

---

但这不是我所期望的。尤其是在动画结束时（它太向左了）。

动画结束时的一个快速修复方法是将css中的第二个Y旋转设置为112deg。111.4deg似乎更好：-）实际上是90度，但使用

透视图：1000px

（我还不明白）它需要更多的Y旋转。

body {
  overflow: hidden;
  perspective: 1000px;
}

.funky-show-hide.ng-hide-add {
  transform: rotateZ(0);
  transform-origin: right;
  transition: all 0.5s ease-in-out;
}

.funky-show-hide.ng-hide-add.ng-hide-add-active {
  transform: rotateZ(-135deg);
}

.funky-show-hide.ng-hide-remove {
  transform: rotateY(90deg);
  transform-origin: left;
  transition: all 0.5s ease;
}

.funky-show-hide.ng-hide-remove.ng-hide-remove-active {
  transform: rotateY(0);
}

.check-element {
  border: 1px solid black;
  opacity: 1;
  padding: 10px;
}

.funky-show-hide.ng-hide-add {
  transform: rotateY(0);
  transform-origin: left;
  transition: all 0.5s ease-out;
}

.funky-show-hide.ng-hide-add.ng-hide-add-active {
  transform: rotateY(180deg);
}