Question

这是一个演示我的问题的小提琴 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前面与红色对齐。

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

Answer 1

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

Answer 2

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

我在这里创建了一个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);
}

Answer 3

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

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

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

3 个答案: