html - 带顶点的CSS3折叠动画

Question

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

感谢您的帮助。

this is the example: Adidas

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

从 base 正方形 div 开始，将内部 div 旋转 45 度。这个 div 将通过对 Angular 线剪辑另一个。在这个里面，你设置了另一个带有image的div，反向旋转45度以保持图像水平。你在悬停中设置 div 围绕对 Angular 线在 3d 中旋转

demo