html - 带顶点的 CSS3 折叠动画

Question

我需要div用顶点折叠一个正方形。我在 Internet 上找到了一些将边缘折叠成正方形的示例div。有人知道我怎样才能制作这个动画吗？这是 Flash 中的一个示例，但我希望在 CSS3 和 HTML5 中使用相同的示例。

谢谢你的帮助。

这是一个例子：阿迪达斯

Answer 1

对于这个简单的 HTML

<div id="base">
<div id="clip">
<div id="image">
</div>
</div>
</div>

你设置了这个 CSS：

div {
    overflow: hidden;
    -webkit-transform-style: preserve-3d;
}
#base {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
    transition: all 0.3s;
}
#clip {
    width: 290px;
    height: 290px;
    -webkit-transform: rotateZ(-45deg);
    -webkit-transform-origin: 0px 0px;
}
#image {
    width: 200px;
    height: 200px;
    -webkit-transform: rotateZ(45deg);
    -webkit-transform-origin: 0px 0px;
    background-image: linear-gradient(0deg, red, blue);
}

#base:hover {
    -webkit-transform: rotate3d(1,1,0,-45deg);
    -webkit-transform-origin: center center;
}

从基本方形 div 开始，您将内部 div 旋转 45 度。这个 div 将通过对角线夹住另一个。在这个里面，你用image设置另一个 div ，反向旋转 45 度以保持图像水平。然后在悬停中设置 div 以围绕对角线进行 3d 旋转

演示