带顶点的 CSS3 折叠动画答案

【问题标题】：CSS3 Folding Animation with vertex带顶点的 CSS3 折叠动画
【发布时间】：2013-05-30 05:19:52
【问题描述】：

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

感谢您的帮助。

this is the example: Adidas

【问题讨论】：

awwwards.com/…

标签： html css animation css-animations

【解决方案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 将通过对角线剪辑另一个。在这个里面，你用 image 设置另一个 div，反向旋转 45 度以保持图像水平。然后在悬停中设置 div 以围绕对角线进行 3d 旋转

demo

【讨论】：