超简单的CSS3变换动画

Question

虽然很简单，但我无法让这个动画正常工作。

我在悬停div时的动画是：

• transform3d（0，Xem，0）
• 边界
• 高度

所以，没什么特别的。但是当我在Chrome中打开它时，我的悬停动画效果非常糟糕。

最糟糕的是变换3d使我的文字变得模糊。为什么？没有缩放或任何3D效果。

在浏览器中查看：Click

我错过了什么吗？这看起来像是一个非常简单的动画。

离开前

div

div hover（模糊文字）

CSS代码（SASS）基本上是：

.disciplines-wrapper > div {
color: white;
padding: 0;
width: 33%;
margin-right: .5%;
margin-top: 320px;
height: 12em;
height: 8.375em;
cursor: pointer;
position: relative;


.wrap {
    height: 8.375em;
    position: absolute;
    transition: transform 0.2s ease-out, height 0.2s ease-out, border 0.2s ease-out;
    border: 1px solid white;
    overflow: hidden;
    backface-visibility: hidden;


    &:hover {
        transform: translate3d(0, -3.475em, 0);
        height: 11.875em;
        border: 1px solid $lightblue;
        background: $lightblue;

    }
}
}

HTML

<div class="disciplines-wrapper">

            <div class="col-1-3">

                    <div class="wrap">
                        <div class="disciplines-text-wrapper">
                            <h1>
                                Kreation
                            </h1>
                            <p>Effektive Werbung entsteht durch das optimale Zusammenspiel aller Kreativen. </p>
                        </div>
                        <a href="#"><i class="icon-right-circled"></i>Weitere Informationen</a>
                    </div>

            </div>
            <div class="col-1-3">
                    <div class="wrap">
                        <div class="disciplines-text-wrapper">
                            <h1>
                                Druck
                            </h1>
                            <p>Kernkompetenz von Prinovis ist der Druck. Schnell, hochwertig und flexibel.</p>

                        </div>
                        <a href="#"><i class="icon-right-circled"></i>Weitere Informationen</a>
                    </div>
            </div>
            <div class="col-1-3">
                <div class="wrap">
                    <div class="disciplines-text-wrapper">
                        <h1>
                            Weiterverarbeitung
                        </h1>
                        <p>Nach dem Druck ist vor der Verarbeitung: Sammelheftung oder Klebebindung</p>

                    </div>
                    <a href="#"><i class="icon-right-circled"></i>Weitere Informationen</a>
                </div>
            </div>

    </div>