javascript - 当有人点击链接(图像)时，是否可以缩放？

Question

在我的主页上，我有 3 个链接(图片)。就像一个门户。

这是我想做的:当你点击其中一个链接时，你会放大到那个链接。到目前为止，它填满了整个屏幕。但我还不想让您看到该页面中的内容。

例子: http://prezi.com/0ehjgvtr9fzu/?utm_campaign=share&utm_medium=copy (点击云上写着:“主要思想”)

这可以用 HTML/CSS/JavaScript 实现吗？

Answer 1

您不能“缩放”视口(viewport)，但可以使用 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 是“视口(viewport)”，.page 是将动画显示为全 View 的页面。

这是一个演示:http://jsfiddle.net/j1k3mcLp/

这应该让您入门，您还可以使用 3D 变换做很多事情，这将使您真正获得想要的效果。

更新

这是一个使用 3D 变换的演示:http://jsfiddle.net/j1k3mcLp/1/