12

Javascript を使用せずにアニメーション化された UI コンポーネントを作成するために変換とトランジションに取り組んでおり、その結果を本当に楽しんでいますが、Webkit ブラウザーに固有のように見える厄介な問題に遭遇しました。

回転させた要素では、要素の幅の 100% にまたがるアンカーは、要素の右側の 50% でのみアクセスできます。

この問題は、Firefox で -moz-transform を使用すると発生しませんが、-webkit-transform を使用すると、Chrome と Safari の両方で 100% 再現可能です。

コードは次のとおりです。

<!doctype html>
<html>
<head>
<title>webkit spincard test bed</title>
<style type="text/css">
    #card-lists{
width:100%;
float:left;
}
#card-lists ul{
list-style:none;
}
#card-lists ul li{
width:230px;
height:236px;
}
.non-mobile #card-lists ul.card-list li .flipcard-container:hover .flipcard,
.non-mobile #card-lists ul.card-list li .flipcard-container.hover .flipcard{
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform-style: preserve-3d;
    -moz-transition: all 0s linear 0s;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 0s linear 0s;
}
.non-mobile #card-lists ul.card-list li .flipcard{
    -moz-transform: rotateY(0deg);
    -moz-transition: all 0s linear 0s;
    -webkit-transform: rotateY(0deg);
    -webkit-transition: all 0s linear 0s;
    width:230px;
    height:236px;
}
.face {
    position: absolute;
    width: 100%;
    height: 100%;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.face.back {
background-color: #125672;
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}
.face.front {
    background-color:#000;
}
</style>
</head>
<body class="non-mobile">
<div id="card-lists">
<ul class="card-list" id="cardes-list-total">
    <li>
    <div class="flipcard-container">
        <div class="flipcard">
            <div class="front face">
                <a href="#">
                <div style="width:100%; height:100%;">
                </div>
                </a>
            </div>
            <div class="back face">
                <a href="#">
                <div style="width:100%; height:100%;">
                </div>
                </a>
            </div>
        </div>
    </div>
    </li>
</ul>
</div>
</body>
</html>

私はすでにこの問題に途方もない時間を費やしてきたので、誰かが提供できる助けがあれば大歓迎です。

4

2 に答える 2

20

Webkit Bugzilla をくまなく調べたところ、同じ問題を抱えている人を見つけ、回避策を見つけました。

.face.back {
    background-color: #125672;
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

なります:

.face.back {
    background-color: #125672;
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg) translateZ(1px);
}

トランスフォームに translateZ を追加すると、要素の左側がクリック可能になります。

バグへのリンクは次のとおりです: https://bugs.webkit.org/show_bug.cgi?id=54371

于 2012-06-05T16:00:56.680 に答える
1

以下のこのコードを使用しました

<style>    
.outer div {
        float: left;
        -webkit-perspective: 200px;
        -webkit-transform-style: preserve-3d;
    }
.outer a {
        -webkit-transition: all 1.0s ease-in-out;
        background:#0F6;
        width:100px;
        height:100px;
        display:block;
        -webkit-transform: rotateY(45deg);
    }
.outer div:hover a {
        -webkit-transform: none;
    }
</style>

<div class="outer">
    <div>
        <a href="http://www.google.com/"></a>
    </div>
</div>

このソリューションは、クロムで機能します。http://jsfiddle.net/jaxweb/7qtLD/7/

于 2014-03-07T20:10:44.503 に答える