CSS3 プロパティを使用してブロック要素に反転効果を作成する方法に関するチュートリアルをいくつか読み、それを再現しようとしました。
私の問題は、これらの各チュートリアルで、すべての「フリッパー」のサイズが固定されていたため、コンテンツに応じて可変サイズで作成したいということです。
これが私が持っているコードです:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html * {
margin: 0;
padding: 0;
}
/*===============================================*/
/* FLIPPER REQUIRED CSS */
/*===============================================*/
.Flipper
{
position: relative;
/*overflow: auto;/**/
-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
-o-perspective: 600px;
perspective: 600px;
}
.Flipper > .Content
{
position: absolute;
/*overflow: auto;/**/
width: 100%;
height: 100%;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.Flipper:hover > .Content, .Flipper .Back
{
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.Flipper .Front, .Flipper .Back
{
position: absolute;
width: 100%;
height: 100%;
/*overflow: auto;/**/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
/*===============================================*/
/* FLIPPER CUSTOM CSS */
/*===============================================*/
.Flipper
{
/*
width: 400px;
height: 400px;
*/
}
.Flipper {
background: #00F;
}
.Flipper .Front {
background: #0F0;
}
.Flipper .Back {
background: #F00;
}
</style>
</head>
<body>
<div class="Flipper">
<div class="Content">
<div class="Front">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="Back">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</body>
</html>
.Flipper 要素に固定幅と高さ (または最小幅と最小高さ) を指定すると正常に動作しますが、指定しないとフリッパーが表示されません。
誰もが絶対的な位置にいるからだと思います。だから私は使用しようとしました:overflow:auto; 絶対位置の要素を含むすべてのブロックで、しかしそれは助けにはなりませんでした. 次に、すべての width: 100%; を削除しようとしました。高さ: 100%; そして、overflow: auto; を使用します。しかし、私は同じ結果を得ました。.Flipper 要素を .Front 要素と .Back 要素のコンテンツのサイズに合わせる方法を知っていますか?
前もって感謝します。