在悬停时，图像在3D前面弹出另一个图像

Here is a fiddle to demonstrate my question FIDDLE

这是一个小提琴来演示我的问题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>

As you can see in the fiddle, I have used two different div elements in 3D: one in front and the other behind it.

正如你在小提琴中看到的那样,我在3D中使用了两个不同的div元素:一个在前面,另一个在它后面。

Now when I hover over the div, the position changes. While hovering, I need the div with the green colour to align in front of the div with the red colour.

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

I am new to CSS, so looking for any help. Thanks

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

3 个解决方案

#1

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.

我做了另一个修改。事实证明,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;
}

#2

I'm not sure if you're looking for a flip animation or a different kind of animation, but I don't have enough reputation to ask you to clarify.

我不确定你是在寻找翻转动画还是其他类型的动画,但我没有足够的声誉要求你澄清。

I've created a jsfiddle here: http://jsfiddle.net/jjordanca/dUbpN/

我在这里创建了一个jsfiddle:http://jsfiddle.net/jjordanca/dUbpN/

It uses roughly the same parameters as you've given in your HTML and CSS. Note that we've moved the perspective to be in the #email, and that the transformation is taking place on the actual object, the li. I've added the .green and .red classes to make it easier to read the CSS, but this can easily be done using child and sibling selectors if you're not able or willing to add more classes.

它使用与您在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);
}

#3

Perhaps this is more what you're looking for, then? I'm leaving my existing answer alone so the comments to it don't get confusing.

或许这更像你正在寻找的东西呢?我只留下现有的答案,所以对它的评论不会让人感到困惑。

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

另一个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);
}