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

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

您必须将内部元素包装在span中并应用相反的变换:

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

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

演示