CSS Flip Transition Between Two <div>'s
CSS Flip Transition Between Two <div>'s
我使用以下 css 在两个div 之间创建了一个翻转过渡......
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-o-perspective: 1000;
perspective: 1000;
max-width: 320px;
width: 100%;
}
/* flip speed goes here */
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.flipper > img {
opacity: 0;
z-index: 0;
}
.flipper.flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/* hide back of pane during swap */
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
}
/* back, initially hidden pane */
.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
使用以下 html...
<div class="flip-container">
<div class="flipper" id="flipper" onclick="this.classList.toggle('flipped')">
<div class="front" id="front"></div>
<div class="back" id="back"></div>
</div>
</div>
我现在有两个问题...
翻转后,仅呈现
<div>
的右半部分正在注册onClick
如果浏览器不支持过渡,我希望将其降级为:
- 一个简单的非动画版本
- 或者两个
<div>
并排
解决方案/建议,以解决这些问题,非常感谢。
对于右半部分,我在我也使用翻转动画的网站 (http://worldisbeautiful.net( 中遇到了这个问题。它看起来像一个webkit错误,你的动画在火狐上工作得很好。我很难避免这个错误,我不确定如何通过动画避免它,因为我的在"后"DIV 中涉及 2 个额外的 DIV。但是,我不得不在后面的div中使用pointer-events: none;
,希望它可以帮助您。
对于第二个问题,我建议您默认显示降级版本。然后,您可以使用类似 Modernizr 的东西来检查浏览器支持,然后使用动画所需的 CSS。http://modernizr.com/您需要检查 csstransitions
、 csstransforms
和 csstransforms3d
。
我之前在翻卡时遇到了同样的问题,现在我已经为所有浏览器提供了翻卡的解决方案,即使是 IE10 修复程序。 我已经为悬停编写了请根据您的要求使用所需的代码。
HTMl Strucrure
<div class="flip-container">
<div class="flipper">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
.css
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective:1000;
-ms-perspective: 1000;
perspective: 1000;
-ms-transform: perspective(1000px);
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
}
/* for IE */
.flip-container:hover .back, .flip-container.hover .back {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.flip-container:hover .front, .flip-container.hover .front {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/* END: for IE */
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-ms-transition: 0.6s;
-moz-transition: 0.6s;
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
top: 0;
left: 0;
width: 180px;
height: 180px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
-ms-transition: 0.6s;
-ms-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
width: 180px;
height: 180px;
}
.front {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
background-position: center center;
z-index: 2;
background:green;
}
.back {
background: #f2f2f2;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(-180deg);
}
Jsfiddle 上的演示
to 2。
你有没有看过现代化。(仅在 js 处于活动状态时才有效(。
此库测试 css 功能,并将相应的类添加到 html 标记。(例如 csstransforms
(。有了这个,您可以设置与支持的功能相对应的区域的样式。
例如,在您的样式表中有这样的规则:
/*this is the common rule*/
.theArea {
border: 1px solid green;
}
/*this rule will be applied if transitions are available*/
.csstransforms .theArea {
border: 1px solid red;
}
在 http://modernizr.com/download/,您有一个可以测试的所有功能的列表。
它不会真正测试该功能是否存在。但是测试浏览器是否知道使用的相应关键字,如果是,则很可能浏览器支持该功能。
- 在<页眉>标签
- 添加文字和评论功能更新Div
- 如何更改<svg>标记为<img>用js标记
- Ckeditor-plugin:插入虚假元素add不情愿<p>标签前后
- Ajax文件加载和<输入>文件加载
- 为什么要使用0>javascript中的0
- 点击后隐藏潜水?(但如果Div是一面旗帜呢?)
- 检测电话窃听,即:<a href="电话:xxx">在UIWebview上
- 使用JavaScript动态插入DIV的成本有多高
- 链接所有<a>Meteor
- 在<输入类型=“;文件“/>
- DIV并排,位置不正确
- Div根据<选择>菜单
- 将插入符号位置移动到ContentEditable<DIV>
- 正在转换<br>标记到<Div>或者<P>标签
- 单击[提交]->隐藏DIV容器1->显示DIV容器2->加载在DIV容器2中的.PHP文件中找到的DI
- 如何在<Div类=“;abc定义“;style='显示“>或者在<Div类=“;aB-cd-e
- 如何将<DIV>标签,该标签来自AJAX
- 仅重新加载<Div>不是整个形式
- 将函数绘制为<DIV>