Question

在我的主页上，我有3个链接（图像）。像门户网站。

这就是我想要做的：当您单击其中一个链接时，您可以放大到那个链接。到目前为止，它填满了整个屏幕。但是我不想让你看到那个页面里有什么。

实施例： http://prezi.com/0ehjgvtr9fzu/?utm_campaign=share&utm_medium=copy（点击云上写着：＆＃34;主要想法＆＃34;）

这可以使用HTML / CSS / JavaScript吗？

Answer 1

您无法“缩放”视口，但可以使用CSS / JS通过缩放动画中的元素来模拟行为。使用CSS转换/转换，您可以非常轻松地缩放“页面”，然后在单击时展开它（就像您的演示Flash对象一样）。

基本演示：

#container {
    transform-style : preserve-3d;
    perspective     : 400px;
}

#container .page {
    transition : transform 500ms ease-out;
    transform  : scale(0.2);
}

#container .page.make-page-big {
    transform : scale(1);
}

其中#container是“视口”，.page是一个动画为全视图的页面。

以下是演示：http://jsfiddle.net/j1k3mcLp/

这应该让你开始，你可以做很多3D变换，这将让你真正得到你想要的效果。

<强>更新

以下是使用3D变换的演示：http://jsfiddle.net/j1k3mcLp/1/

当有人点击链接（图像）时，是否可以缩放？

1 个答案: