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中使用了两个不同的 div 元素中使用了两个不同的 div 元素：一个在前面，另一个在后面。

现在，当我将鼠标悬停在 div 上时，位置会发生变化。悬停时，我需要绿色的 div 与红色的 div 前面对齐。

我是 CSS 新手，所以寻求任何帮助。谢谢

4

3 回答 3

2

I've made another modification. It turns out that Chrome needs a transform on the non-hovered element in order to position it while hovering.

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。我添加了.green和.red类以更容易阅读 CSS，但是如果您不能或不愿意添加更多类，则可以使用子选择器和同级选择器轻松完成。

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 回答