私は基本的なhtmlページを持っています。ユーザーに「仮想カード」を表示したいのですが、フロントページには人々に関する情報が表示され、裏面にはその人の写真が表示されます。
trasform 効果が最初のクリックと同じ (または元に戻る) ように、toggleClass を実装するにはどうすればよいですか。
フィドルの完全な例: http://jsfiddle.net/ZnYx7/
jQuery:
$(document).ready(function() {
$('.click').on('click', function() {
$(this).addClass('flip').children('.front, .back').delay(600).toggle(0).delay(1500).toggle(0, function() {
$(this).parent().removeClass('flip');
});
});
});
そして最後にcss：
.effects {
-ms-transition-property: all;
-ms-transition-duration: 2s;
-ms-transform: rotateX(0deg);
-webkit-transition-property: all;
-webkit-transition-duration: 2s;
-webkit-transform: rotateX(0deg);
-o-transition-property: all;
-o-transition-duration: 2s;
-o-transform: rotateX(0deg);
-moz-transition-property: all;
-moz-transition-duration: 2s;
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
cursor: pointer;
float: left;
height: 190px;
margin: 1%;
position: relative;
text-align: center;
width: 31%;
}
.front {
background: url("../img/front-icon.png") no-repeat scroll center top transparent;
left: 0;
padding-top: 60px;
position: relative;
right: 0;
top: 0;
display: inline-block;
}
.back {
-ms-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
transform: rotateX(180deg);
display: none;
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.pad {
height: 100%;
}
.flip {
-ms-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
transform: rotateX(180deg);
}
これは紛らわしいように思えるかもしれないので、すべてをフィドルに置きますhttp://jsfiddle.net/ZnYx7/
どんなアイデアでも大歓迎です！
よろしくお願いします！