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

【问题标题】：Apply CSS transform to container, but not to content将 CSS 转换应用于容器，但不应用于内容
【发布时间】：2015-06-18 07:41:32
【问题描述】：

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

我只想翻转 div，但内容保持不翻转。

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

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

这是我正在使用的带有变换的动画：

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

【问题讨论】：

标签： css

【解决方案1】：

您必须将内部元素包装在一个跨度中并应用相反的变换：

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

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

demo

【讨论】：

我错过了display:block;。谢谢！