我试图模仿通常在你有一个面板的移动设备上找到的效果,当你点击它旋转的按钮时,在另一边它有一些其他信息.
我找到了一些使用css过渡和here is an example的代码
js
$('#signup').on('click',function(e) {
e.preventDefault();
document.getElementById( 'side-2' ).className = 'flip flip-side-1';
document.getElementById( 'side-1' ).className = 'flip flip-side-2';
});
$('#create').on('click',function(e) {
e.preventDefault();
document.getElementById( 'side-2' ).className = 'flip';
document.getElementById( 'side-1' ).className = 'flip';
});
这个例子的问题是,如果我将javascript转换为jquery,它会停止工作:
从:
document.getElementById( 'side-2' ).className = 'flip flip-side-1';
至
$( '#side-2' ).addClass('flip flip-side-1');
此外,我不确定是否还没有一个jquery插件以更好的方式执行此操作.
有任何想法吗?
一些更多的代码.
HTML
CSS
.flip {
backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border: 1px solid black;
transform-origin: 50% 50% 0px;
-moz-transform-origin: 50% 50% 0px;
-ms-transform-origin: 50% 50% 0px;
-o-transform-origin: 50% 50% 0px;
-webkit-transform-origin: 50% 50% 0px;
transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
}
#side-1 {
transform: rotateY( 0deg );
-moz-transform: rotateY( 0deg );
-ms-transform: rotateY( 0deg );
-o-transform: rotateY( 0deg );
-webkit-transform: rotateY( 0deg );
}
#side-2 {
transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-ms-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
-webkit-transform: rotateY( 180deg );
}
.flip-side-1 {
transform: rotateY( 0deg ) !important;
-moz-transform: rotateY( 0deg ) !important;
-ms-transform: rotateY( 0deg ) !important;
-o-transform: rotateY( 0deg ) !important;
-webkit-transform: rotateY( 0deg ) !important;
}
.flip-side-2 {
transform: rotateY( 180deg ) !important;
-moz-transform: rotateY( 180deg ) !important;
-ms-transform: rotateY( 180deg ) !important;
-o-transform: rotateY( 180deg ) !important;
-webkit-transform: rotateY( 180deg ) !important;
}
最佳答案
http://lab.smashup.it/flip/是我发现的最好的.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。