1

これが私の質問を示すためのフィドルです FIDDLE

CSS:

#email { 
list-style: none; 
   margin: 100px 0; 
   height: 550px; 
}
#email li { 
   display: inline; 
   float: left;
   -webkit-perspective: 500; 
   -webkit-transform-style: preserve-3d;
   -webkit-transition-property: perspective; 
   -webkit-transition-duration: 0.5s;
   -moz-perspective: 500; 
   -moz-transform-style: preserve-3d;
   -moz-transition-property: perspective; 
   -moz-transition-duration: 0.5s; 
}
#email li:hover {
   -webkit-perspective: 5000; 
   -moz-perspective: 5000;
}
#email li div { 
   border: 10px solid #fcfafa; 
   -webkit-transform: rotateY(30deg);
   -moz-transform: rotateY(30deg);
   -moz-box-shadow:0 3px 10px #888; 
   -webkit-box-shadow:0 3px 10px #888;
   -webkit-transition-property: transform; 
   -webkit-transition-duration: 0.5s; 
   -moz-transition-property: transform; 
   -moz-transition-duration: 0.5s; 
}
#email li:hover div { 
   -webkit-transform: rotateY(0deg); 
   -moz-transform: rotateY(0deg);
}

HTML:

<ul id="email">
    <li>
       <div style="width: 180px; height: 180px; margin-bottom: 10px; background-color:green"><div>
       <div style="width: 250px; height: 200px; margin-left: 5px; margin-bottom: 10px; background-color: red"></div>
    </li>
</ul>

フィドルでわかるように、3Dで 2 つの異なる div 要素を使用しました。1 つは前に、もう 1 つはその後ろにあります。

divにカーソルを合わせると、位置が変わります。ホバリングしている間、赤色のdivの前に緑色のdivを配置する必要があります。

私はCSSが初めてなので、助けを求めています。ありがとう

4

3 に答える 3

2

別の修正を加えました。ホバリング中に配置するには、ホバーされていない要素の変換が Chrome に必要であることがわかりました。

jsfiddle: http://jsfiddle.net/jjordanca/NYpbS/2/

HTML

<ul id="email">
    <li>
        <div class="green" style="width:180px;height:180px;background-color:green"></div>
        <div class="red" style="width:250px;height:200px;margin-left:5px;background-color:red"></div>
    </li>
</ul>

CSS

#email {
    list-style:none;
    margin:100px 0;
    height:550px;
}

#email li{
    display: block;
    -webkit-perspective: 500px;
    -moz-perspective: 500px;
    position: relative;
    width: 100%;
    height: 100%;
    -moz-transform-origin: 25% 50%;
    -webkit-transform-origin: 25% 50%;
}

#email:hover .green {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform: translate3d(100px,0,175px);
    -moz-transform: translate3d(100px,0,175px);
    -webkit-transition-property: transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: transform;
    -moz-transition-duration: 1s;
    z-index: 2;
}

#email:hover .red {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform: translate3d(0, 0, -175px);
    -moz-transform: translate3d(0, 0, -175px);
    -webkit-transition-property: transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: transform;
    -moz-transition-duration: 1s;
    z-index: 1;
}

#email li div {
    display: block;
    position: absolute;
    -moz-box-shadow:0 3px 10px #888;
    -webkit-box-shadow:0 3px 10px #888;
}

#email li .green {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform: translate3d(50px, -50px, -50px);
    -moz-transform: translate3d(50px, -50px, -50px);
    z-index: 1;
}

#email li .red {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform: translate3d(150px, 50px, 50px);
    -moz-transform: translate3d(150px, 50px, 50px);
    z-index: 2;
}
于 2013-08-13T07:24:49.357 に答える
1

あなたが探しているのがフリップ アニメーションなのか、それとも別の種類のアニメーションなのかはわかりませんが、明確にするように求めるほどの評判はありません。

ここで jsfiddle を作成しました: http://jsfiddle.net/jjordanca/dUbpN/

HTML および CSS で指定したものとほぼ同じパラメーターを使用します。パースペクティブを に移動したこと#emailと、変換が実際のオブジェクトである で行われていることに注意してくださいli。CSS を読みやすくするために.greenとクラスを追加しましたが、これ以上クラスを追加できない、または追加したくない場合は、子セレクターと兄弟セレクターを使用して簡単に行うことができます。.red

HTML

<ul id="email">
    <li>
        <div class="green" style="width:180px;height:180px;margin-bottom:10px;background-color:green"></div>
        <div class="red" style="width:250px;height:200px;margin-left:5px;margin-bottom:10px;background-color:red"></div>
    </li>
</ul>

CSS

#email {
    list-style:none;
    margin:100px 0;
    height:550px;
    -webkit-perspective: 500;
    -moz-perspective: 500;
    position: relative;
}

#email li{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition-property: transform;
    -webkit-transition-duration: 0.5s;
    -moz-transform-style: preserve-3d;
    -moz-transition-property: transform;
    -moz-transition-duration: 0.5s;
    -moz-transform-origin: 25% 50%;
    -webkit-transform-origin: 25% 50%;
}

#email:hover li {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -webkit-transition-property: transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: transform;
    -moz-transition-duration: 1s;
}

#email li div {
    display: block;
    position: absolute;
    -moz-box-shadow:0 3px 10px #888;
    -webkit-box-shadow:0 3px 10px #888;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

#email li div.red {
 z-index: 2;   
}

#email li div.green {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
}
于 2013-07-31T15:11:57.797 に答える
0

おそらく、これはあなたが探しているものではありませんか？コメントが混乱しないように、既存の回答をそのままにしておきます。

別の jsfiddle: http://jsfiddle.net/jjordanca/NYpbS/

HTML

<ul id="email">
    <li>
        <div class="green" style="width:180px;height:180px;background-color:green"></div>
        <div class="red" style="width:250px;height:200px;margin-left:5px;background-color:red"></div>
    </li>
</ul>

CSS

#email {
    list-style:none;
    margin:100px 0;
    height:550px;
}

#email li{
    display: block;
    -webkit-perspective: 500px;
    -moz-perspective: 500px;
    position: relative;
    width: 100%;
    height: 100%;
    -moz-transform-origin: 25% 50%;
    -webkit-transform-origin: 25% 50%;
}

#email:hover li .green {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform: translateZ(50px);
    -moz-transform: translateZ(50px);
    -webkit-transition-property: transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: transform;
    -moz-transition-duration: 1s;
}

#email:hover li .red {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform: translateZ(-50px);
    -moz-transform: translateZ(-50px);
    -webkit-transition-property: transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: transform;
    -moz-transition-duration: 1s;
}

#email li div {
    display: block;
    position: absolute;
    -moz-box-shadow:0 3px 10px #888;
    -webkit-box-shadow:0 3px 10px #888;
}

#email li .green {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform: translate3d(-100px, -100px, -100px);
    -moz-transform: translate3d(-100px, -100px, -100px);
}
于 2013-08-01T08:03:43.237 に答える