能够翻转div盒，改变它们的大小，以及与内容交互

Answer 1

应该可以只使用几行Javascript来完成此操作。你发布的Rich Bradshaw的例子是一个很好的起点。

我没有开始翻转悬停（通过css选择器），而是添加了几行Javascript - 实际上是jQuery，但是普通的JS可以工作 - 在点击时添加相关的类。它的效果非常好......

<强> See jsFiddle Demo

我还设法让背面可点击（如在该演示中），因此它应该满足您的所有需求。

通过该方法，HTML将简化为：

<div id="f1_container">
    <div id="f1_card" class="shadow">
        <div class="front face">
            <img src="http://lorempixel.com/450/281/" />
        </div>
        <div class="back face center">
            <p>This is nice for exposing more information about an image.</p>
            <p>Any content can go here.</p>
            <p>Including interactive HTML like
                <a href="http://www.example.com/">links</a></p>
        </div>
    </div>
</div>

而Javascript只是：

$('#f1_container').click(function() {
    $('#f1_container').addClass('clicked');
});