Question

切换时我想要翻转表格行内容。当前的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个内容，首先在前面，第二个是在悬停（后退）时。我怎么能这样做？

Answer 1

此解决方案取自David Walsh的博客，我希望你能帮到你选中 Fiddle

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

如果此解决方案不符合您的需求，我会为您浪费时间而道歉。

Answer 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

在切换时翻转表行内容

2 个答案: