私はここで新しいので、誤解されている場合は申し訳ありません。
ユーザーがdivにカーソルを合わせたときにフリップアニメーションを作成しました。Firefox では完全に動作しますが、Chrome では動作しません。解決策を見つけようとして最後の時間を失いました。
HTML
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img src="http://www.online-image-editor.com/styles/2013/images/example_image.png" />
</div>
<div class="back">
<div class="middle">
<div class="avatar">
<img src="http://planetearth.nerc.ac.uk/images/uploaded/custom/blue-planet-c.jpg" />
</div>
<div class="cv">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
</div>
CSS
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
transform-style: preserve-3d;
}
/* UPDATED! flip the pane when hovered */
.flip-container:hover .back, .front img:hover .back {
transform: rotateY(0deg);
}
.flip-container:hover .front {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 475px;
height: 300px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
/* UPDATED! front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(-180deg);
display: table;
}
/*
Some vertical flip updates
*/
.vertical.flip-container {
position: relative;
}
.vertical .back {
transform: rotateX(180deg);
}
.vertical.flip-container:hover .back {
transform: rotateX(0deg);
}
.vertical.flip-container:hover .front {
transform: rotateX(180deg);
}
.back div.middle {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 0px 55px;
}
.back div.middle .avatar {
display:block;
}
.back div.middle .avatar img {
border-radius: 50%;
}
.back div.middle .cv {
}
.back div.middle .cv p {
width: 90%;
margin-left: auto;
margin-right: auto;
}