CSS 3D 变换属性答案

【问题标题】：CSS 3D Transform propertyCSS 3D 变换属性
【发布时间】：2013-10-18 10:59:56
【问题描述】：

我正在使用 CSS3 转换属性创建“翻转”效果。

我有一些在 Chrome、Firefox 和 Safari 的最新版本中运行良好的东西，但恐怕我很难为 IE9 和 Opera 构建某种回退，因为它们只支持 2d 转换。

我创建了一个小提琴来显示我当前正在使用的代码。

请在此处找到此链接：http://jsfiddle.net/montyhog/SaYUe/9/

我不一定要尝试在这些浏览器中重新创建效果，只是创建一个回退，当 IMG1 悬停时，IMG2 淡入等等。

这是 HTML：

<div class="h1older">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front"><img src="http://www.hogshouse.com/fbtest/img/cdartwork/meds.png" /></div>
<div class="back"><img src="http://www.hogshouse.com/fbtest/img/cdartwork/back.png" /></div>
</div>
</div>
</div>

还有 CSS：

.h1older {
    width: 400px;
    height: 400px;
    border: 1px #ff00d5 dashed;
    position: absolute;
    top: 0px;
    left: 0px;
}

.flip-container {
    perspective: 1000;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
}

.flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
}

.flip-container:OnClickListener .flipper, .flip-container.OnClickListener .flipper {
        transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
}

.flip-container:focus .flipper, .flip-container.focus .flipper {
        transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
}


.flip-container, .front, .back {
    width: 100%;
    height: 100%;
}

.flipper {
    transition: 0.6s;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    position: relative;
}

.front, .back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.front {
    z-index: 2;
    background-color: #139eef;
}

.back {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    background-color: #ff0000;
}

.front img {
    width: 100%;
}

.back img {
    width: 100%;
}

【问题讨论】：

标签： html css transform fallback

【解决方案1】：

-o-tramsform:

和

-ms-transform:

过渡应该适用于 IE 和 Opera。为您进行的每个转换再创建 2 个 alt 行。

【讨论】：