在切换时翻转表格行内容答案

【问题标题】：Flip Table Row Content On Toggle在切换时翻转表格行内容
【发布时间】：2014-05-25 00:32:16
【问题描述】：

切换时我想要翻转表格行内容。当前 CSS 代码：

table {
    width: 100%;
    height: 100%;
    border: 2px solid orange;
    table-layout: fixed;
    color: black;
}

td {
    background-color: #FFD65E;
    vertical-align: text-top;
    padding: 10px;
}

td:hover {
    background-color: #febf04;
}

JSFiddle：http://jsfiddle.net/YAPPF/

我想要水平翻转动画。因此，将有 2 个内容，第一个在前面，第二个是悬停（后）。我该怎么做？

【问题讨论】：

在您希望特定框悬停时旋转的意义上翻转？？
@Yiedpozi - 到目前为止你尝试过什么？

标签： javascript html css html-table

【解决方案1】：

此解决方案取自 David Walsh 的博客，希望对您有所帮助检查此Fiddle

<div class="flip-container">
        <div class="flipper">
            <div class="front">
                front
            </div>
            <div class="back">
                back
            </div>
        </div>
    </div>

如果此解决方案不能满足您的需求，我很抱歉让您浪费时间。

【讨论】：

【解决方案2】：

您可以使用只有一个图形作为“箭头”，但可以翻转它以指向不同的方向。

img {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

如果您在理解这方面有困难，请转到此链接
http://davidwalsh.name/css-flip

【讨论】：