小编BoC*_*edy的帖子

好的,所以我对编写Javascript知之甚少,我可以稍微编辑一下,并且在CSS3动画中有点涉及.

我会给你一个我想要实现的东西的形象,然后在下面解释.

网站布局如下:http://i.imgur.com/XyhaxNP.jpg

我已经在Google上找到了一些方法,但是当用户将鼠标悬停在div上时,他们中的大多数似乎都会翻转div,我需要将它放在点击事件上,因为它还需要在移动设备上运行.

带有切换按钮的第三个演示就是我所看到的,但是当我将事件添加到图像时,这似乎不起作用.

这是我到目前为止,我已将onclick事件移动到图像(它曾经在我找到的演示中的按钮上),但它不能在图像上工作.

HTML:

<div class="flip-container">
    <div class="flipper">
        <div class="front">
            <img class="teamlogo" onclick="document.querySelector('#flip-toggle').classList.toggle('flip');" src="images/logo/niners.png"/>
        </div>
        <div class="back">
            Back of div content
        </div>
    </div>
</div>

CSS:

.teamlogo{
padding-left: 5%;
}

/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}

/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
    transform: rotateY(180deg);
}

.flip-container, .front, .back {
width: 320px;
height: 480px;
}

/* flip speed goes here */
.flipper {
transition: 0.6s; …

我的锚标记中有一张图像，我需要将其居中。

我已经成功地使用了我刚刚在 DOM 检查器中遇到的这种技术来做到这一点： http: //jsfiddle.net/m6e3m/

它用：

display: table;
margin 0 auto;

我尝试使用：

display: block;
margin: 0 auto;
width: (?)px;

但我发现它实际上并没有居中，除非我把宽度弄乱了很多，这并不是很好，因为锚标记宽度似乎也不起作用（imo），这就像基本上使用左边距。

好奇你们中是否有人以前使用过这个或找到了更好的技术作为显示：IE 7及之后版本不支持表格