Question

我在css3动画中有一个css变换导致div翻转。问题是内容也会出现翻转。

我只想翻转div，但内容仍然不会被解开。

这是一个JS小提琴，我的动画发生在页面加载：http://jsfiddle.net/ukg4P/

看，div和内容被翻转。我怎样才能翻转/转换div，而不是它的内容？

以下是我正在使用的变换动画：

@keyframes flip{
    0%{
        transform:perspective(400px) rotateY(0deg);
    }
    100%{
        transform:perspective(400px) rotateY(-180deg);
    }
}

Answer 1

您必须将内部元素包装在范围中并应用相反的转换：

<div class="animated flip"><span class="inner">Settings</span></div>

.inner{
    display:block;
    -webkit-transform: perspective(400px) rotateY(180DEG);
}

将CSS转换应用于容器，但不应用于内容

1 个答案:

demo