javascript + css divs折叠效果

Question

我长期以来一直在网上寻找这种效果而没有取得成功。

看起来有一个js脚本可以动态更改css -webkit-transform: rotateY(deg)属性。

网上有什么可以做同样的事情吗？

我希望有人可以分享一个类似的脚本谢谢。

如果有足够的空间，则显示没有旋转的框：

如果没有足够的空间，脚本会改变旋转并让它们彼此靠近：

Answer 1

如果您正在寻找可以旋转或动画HTML元素的库，您可以使用animate.css。它易于使用!!

Answer 2

您的示例看起来像是一个y旋转。这是一个基本的片段。

body {
  display: flex;
}

div {
  width: 150px;
  height: 150px;
  background: url('https://picsum.photos/200?random');
  transition-duration: .35s;
  box-shadow: -3px 3px 3px #000;
}

div:hover {
  transform: rotateY(70deg);
  transition-duration: .35s;
}

<div></div>
<div></div>
<div></div>