Question

我需要用顶点折叠平方div。我在互联网上找到了一些例子来折叠平方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;
}

从 base 方格div开始，旋转内部div 45deg。这个div将剪切另一个通过对角线。在这个内部，你用图像设置另一个div，计数器旋转45度以保持图像水平。并且您在悬停基础上设置div以围绕对角线旋转3d

带顶点的CSS3折叠动画

1 个答案:

demo