Question

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

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

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

我尝试通过将α放在外部div中来做同样的事情并且它工作正常，但是当我尝试对span h1内的#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); }做同样的事情时，它就不会这样做。

这是我的CSS：

{{1}}

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);
}

Answer 2

以下是X和Y翻转的一些代码 - 重要的是您的跨度需要display:inline-block才能应用任何3D转换。

Demo Fiddle

HTML

<h1>WebN<span class="flipX">&alpha;</span>me</h1>
<h1>WebN<span class="flipY">&alpha;</span>me</h1>

CSS

span {
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    -webkit-transform: perspective(250px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    transform: perspective(250px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    display:inline-block;
}
span.flipX:hover {
    -webkit-transform: perspective(250px) rotateX(360deg) rotateY(0deg) rotateZ(0deg);
    transform: perspective(250px) rotateX(360deg) rotateY(0deg) rotateZ(0deg);
}
span.flipY:hover {
    -webkit-transform: perspective(250px) rotateX(0deg) rotateY(360deg) rotateZ(0deg);
    transform: perspective(250px) rotateX(0deg) rotateY(360deg) rotateZ(0deg);
}

Answer 3

用户悬停伪类，

.text-muted{font-zise:12px;}
.text-muted:hover{font-size:20px; /* opr what ever you want to do when mouse hover*/ }

或者您可能想要这个http://css3playground.com/3d-flip-cards/

试试吧

CSS：单个字母的3D翻转

3 个答案:

Demo Fiddle