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

Question

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

我只希望 div 被翻转，但内容保持不变。

这是一个 JS Fiddle，我的动画在页面加载时发生：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);
}

演示