CSS3 - 3D 翻转动画 - IE10 变换原点:保留 3d 解决方法 [英] CSS3 - 3D Flip Animation - IE10 transform-origin: preserve-3d workaround

问题描述

浏览 IE10 的开发者博客 我发现他们不支持preserve-3d 设置.

他们确实提供了一种解决方法，但我似乎无法使其正常工作.我下面的示例适用于 Safari、Chrome 和 Firefox，但不适用于 IE10.如果有人能帮助我实现这一目标，我将不胜感激.

这些框应该在点击时围绕 Y 轴旋转以显示一些文本和绿色背景色.这在 IE10 中并非如此

我的例子: http://codepen.io/2ne/pen/zEpge

部分代码:

HTML

<div class="front"></div><div class="back">IE10 SUCKS</div>

CSS

.flip-wrapper {光标:指针；高度:100%；-moz-透视:1000；-webkit-透视:1000；-ms-透视:1000；视角:1000；-moz-transform-style: 保留 3d；-webkit-transform-style: 保留 3d；-ms-transform-style: 保留 3d;变换风格:preserve-3d；宽度:100%；}.flip-wrapper .front,.flip-wrapper .back {-moz-backface-visibility:隐藏；-webkit-backface-visibility:隐藏；-ms-backface-visibility:隐藏；背面可见性:隐藏；高度:100%；位置:绝对；宽度:100%；}.flip-wrapper .back {背景:无重复滚动 0 0 #298F68；-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);变换:旋转Y(180度)；}.flip-wrapper.flipped {光标:默认；-webkit-animation:翻转 500 毫秒 1；-moz-animation:翻转 500 毫秒 1；动画:翻转 500ms 1；-webkit-animation-fill-mode:转发；-moz-animation-fill-mode:向前；-o-animation-fill-mode:转发；-ms-animation-fill-mode:转发；动画填充模式:向前；}

2ne

解决方案

我似乎也无法在任何地方找到这样的好例子，所以我花了 some 太多时间来制作我自己的.

这个适用于所有浏览器，没有那种奇怪的 360 度 IE 翻转，并且包括静态内容(位于卡片的两侧 - 我需要在右上角放置一个翻转"按钮双方).

--我在最新版本的 Chrome、Firefox、Safari、Opera 和 IE 上进行了测试.

http://jsfiddle.net/Tinclon/2ega7yLt/7/

也适用于透明背景:http://jsfiddle.net/Tinclon/2ega7yLt/8/

css(当然)包括 IE hacks，所以有点长，但是 html 很简单:

<div class="内容"><div class="cardFront">前面的内容</div><div class="cardBack">返回内容</div><div class="cardStatic">静态内容</div>

$('.card').hover(function(){$('.card').toggleClass('applyflip');}.bind(this));

.card {视角:1000px；-webkit-perspective: 1000px;-moz-perspective: 1000px;-o-透视:1000px；-ms-perspective: 1000px;边距:80px 150px;宽度:320px；高度:243px；垂直对齐:顶部；位置:绝对；显示:块；字体大小:25px；字体粗细:粗体；}.card .content {过渡:0.5 秒缓出；-webkit-transition:0.5 秒缓出；-moz-transition:0.5 秒缓出；-o-transition:0.5s 缓出；-ms-transition:0.5s 缓出；变换风格:preserve-3d；-webkit-transform-style: 保留 3d；-moz-transform-style: 保留 3d；-o-transform-style: 保留-3d;-ms-transform-style: 保留 3d;/* 内容背面可见，因此静态内容仍然出现 */背面可见性:可见；-webkit-backface-visibility:可见；-moz-backface-visibility:可见；-o-背面可见性:可见；-ms-backface-visibility:可见；边框:1px 纯灰色；边框半径:15px；位置:相对；宽度:100%；高度:100%；}.card.applyflip .content {变换:旋转Y(180度)；-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-o-变换:旋转Y(180度)；-ms-transform:rotateY(180deg);}.card .content .cardStatic {/* 卡片翻转中途，将静态内容旋转到 0 度 */过渡:0s线性0.17s；-webkit-transition: 0s 线性 0.17s;-moz-transition: 0s 线性 0.17s;-o-transition: 0s 线性 0.17s;-ms-transition: 0s 线性 0.17s;变换:旋转Y(0度)；-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-o-变换:旋转Y(0度)；-ms-transform:rotateY(0deg);文本对齐:居中；位置:绝对；顶部:0；左:0；高度:0；宽度:100%；行高:100px；}.card.applyflip .content .cardStatic {/* 在卡片翻转中途，将静态内容旋转到 -180 度 -- 取消翻转并取消镜像静态内容 */过渡:0s线性0.17s；-webkit-transition: 0s 线性 0.17s;-moz-transition: 0s 线性 0.17s;-o-transition: 0s 线性 0.17s;-ms-transition: 0s 线性 0.17s;变换:旋转Y(-180度)；-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-o-变换:旋转Y(-180度)；-ms-transform:rotateY(-180deg);}.card .content .cardFront {背景颜色:天蓝色；颜色:番茄；}.card .content .cardBack {背景色:番茄；颜色:天蓝色；}.card .content .cardFront, .card .content .cardBack {/* 背面可见性适用于除 IE 以外的所有产品.因此，我们标记了 IE 中可见的背面并自己管理可见性 */背面可见性:隐藏；-webkit-backface-visibility:隐藏；-moz-backface-visibility:隐藏；-o-背面可见性:隐藏；-ms-backface-visibility:可见；位置:绝对；顶部:0；左:0；高度:100%；宽度:100%；文本对齐:居中；行高:200px；边框半径:14px；}.card .content .cardFront, .card.applyflip .content .cardFront {变换:旋转Y(0度)；-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-o-变换:旋转Y(0度)；-ms-transform:rotateY(0deg);}.card .content .cardBack, .card.applyflip .content .cardBack {变换:旋转Y(-180度)；-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-o-变换:旋转Y(-180度)；-ms-transform:rotateY(-180deg);}.card .content .cardFront, .card.applyflip .content .cardBack {/* IE 黑客.在卡片翻转中途，设置可见性.在整个卡片翻转过程中保持其他浏览器可见.*/动画:均保持可见 0.5 秒；-webkit-animation:保持可见 0.5 秒；-moz-animation:均保持可见 0.5 秒；-o-animation:保持可见 0.5 秒；-ms-animation: 无所事事 0.5 秒；-ms-transition:可见性 0s 线性 0.17s；可见性:可见；}.card.applyflip .content .cardFront, .card .content .cardBack {/* IE 黑客.在卡片翻转中途，设置可见性.在整个卡片翻转过程中保持其他浏览器可见.*/动画:均保持可见 0.5 秒；-webkit-animation:保持可见 0.5 秒；-moz-animation:均保持可见 0.5 秒；-o-animation:保持可见 0.5 秒；-ms-animation: 无所事事 0.5 秒；-ms-transition:可见性 0s 线性 0.17s；可见性:隐藏；}@keyframes 保持可见 { 来自 { 可见性:可见；} 到 { 可见性:可见；} }@-webkit-keyframes 保持可见 { from {可见性:可见；} 到 { 可见性:可见；} }@-moz-keyframes 保持可见 { from {可见性:可见；} 到 { 可见性:可见；} }@-o-keyframes 保持可见 { from {可见性:可见；} 到 { 可见性:可见；} }@-ms-keyframes 无用 { 0% { } 100% { } }

After looking through IE10's developer blog I have found that they do not support the preserve-3d setting.

They do offer a workaround, but I can not seem to get it working. My example below works in Safari, Chrome and Firefox but not IE10. If anyone could help me achieve this I would be very thankful.

The boxes should rotate around the Y axis on click to show some text and a green background color. This is not the case in IE10

My example: http://codepen.io/2ne/pen/zEpge

Part of code:

HTML

<div class="flip-wrapper">
    <div class="front"></div>
    <div class="back">IE10 SUCKS</div>
</div>

CSS

.flip-wrapper {
    cursor: pointer;
    height: 100%;
    -moz-perspective: 1000;
    -webkit-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    width: 100%;
}

.flip-wrapper .front,
.flip-wrapper .back {
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    height: 100%;
    position: absolute;
    width: 100%;
}

.flip-wrapper .back {
  background: none repeat scroll 0 0 #298F68;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flip-wrapper.flipped {
  cursor: default;
  -webkit-animation: flip 500ms 1;
    -moz-animation: flip 500ms 1;
    animation: flip 500ms 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

2ne

解决方案

I also couldn't seem to find a good example of this anywhere, so I spent some way too much time making my own.

This one works on all browsers, does not have that weird 360deg IE flip, and includes provision for static content (that lives on both sides of the card - which I needed to put a 'flip' button at the top right of both sides).

--I tested on latest versions of Chrome, Firefox, Safari, Opera, and IE.

http://jsfiddle.net/Tinclon/2ega7yLt/7/

Edit: Also works with transparent backgrounds: http://jsfiddle.net/Tinclon/2ega7yLt/8/

The css (of course) includes IE hacks, so it's a bit long, but the html is quite straightforward:

<div class="card">
  <div class="content">
    <div class="cardFront">FRONT CONTENT</div>
    <div class="cardBack">BACK CONTENT</div>
    <div class="cardStatic">STATIC CONTENT</div>
  </div>
</div>

$('.card').hover(function(){$('.card').toggleClass('applyflip');}.bind(this));

.card {
    perspective: 1000px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    -ms-perspective: 1000px;
    margin:80px 150px;
    width:320px;
    height:243px;
    vertical-align:top;
    position:absolute;
    display:block;
    font-size:25px;
    font-weight:bold;
}

.card .content {
    transition: 0.5s ease-out;
    -webkit-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -o-transition: 0.5s ease-out;
    -ms-transition: 0.5s ease-out;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;

    /* content backface is visible so that static content still appears */
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;


    border: 1px solid grey;
    border-radius: 15px;
    position:relative;
    width: 100%;
    height: 100%;

}
.card.applyflip .content {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
}


.card .content .cardStatic {
    /* Half way through the card flip, rotate static content to 0 degrees */
    transition: 0s linear 0.17s;
    -webkit-transition: 0s linear 0.17s;
    -moz-transition: 0s linear 0.17s;
    -o-transition: 0s linear 0.17s;
    -ms-transition: 0s linear 0.17s;
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);

    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 100%;
    line-height:100px;
}

.card.applyflip .content .cardStatic {
    /* Half way through the card flip, rotate static content to -180 degrees -- to negate the flip and unmirror the static content */
    transition: 0s linear 0.17s;
    -webkit-transition: 0s linear 0.17s;
    -moz-transition: 0s linear 0.17s;
    -o-transition: 0s linear 0.17s;
    -ms-transition: 0s linear 0.17s;
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
}

.card .content .cardFront {
    background-color: skyblue;
    color: tomato;
}

.card .content .cardBack {
    background-color: tomato;
    color: skyblue;
}

.card .content .cardFront, .card .content .cardBack {
    /* Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    line-height:200px;
    border-radius: 14px;
}
.card .content .cardFront, .card.applyflip .content .cardFront {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
}

.card .content .cardBack, .card.applyflip .content .cardBack {
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
}

.card .content .cardFront, .card.applyflip .content .cardBack {
    /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
    animation: stayvisible 0.5s both;
    -webkit-animation: stayvisible 0.5s both;
    -moz-animation: stayvisible 0.5s both;
    -o-animation: stayvisible 0.5s both;
    -ms-animation: donothing 0.5s;
    -ms-transition: visibility 0s linear 0.17s;
    visibility: visible;
}
.card.applyflip .content .cardFront, .card .content .cardBack {
    /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
    animation: stayvisible 0.5s both;
    -webkit-animation: stayvisible 0.5s both;
    -moz-animation: stayvisible 0.5s both;
    -o-animation: stayvisible 0.5s both;
    -ms-animation: donothing 0.5s;
    -ms-transition: visibility 0s linear 0.17s;
    visibility: hidden;
}
@keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-webkit-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-moz-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-o-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-ms-keyframes donothing { 0% { } 100% { } }

这篇关于CSS3 - 3D 翻转动画 - IE10 变换原点:保留 3d 解决方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！