html - CSS:单个字母的3D翻转

Question

我想要实现的是 3D 翻转文本中的单个字母。

<h1>WebN<span class="text-muted" id="logo-alpha">&alpha;</span>me</h1>

在这种特殊情况下，我想在鼠标悬停时水平翻转 α。

我尝试通过将 α 放在外部 div 中来做同样的事情并且它工作正常，但是当我尝试对内部的 span 做同样的事情时却没有h1。

这是我的 CSS:

#logo-alpha {

    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

#logo-alpha:hover {

    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

Answer 1

您正面临这个问题:CSS 转换无法应用于内联元素，请参阅此处:dev.w3.org transformable elements所以你需要更改 <span> 的默认显示属性元素到 inline-block .

FIDDLE

CSS:

#logo-alpha{
    display:inline-block;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    transition: transform 1s;
}


h1:hover #logo-alpha{
    -moz-transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}