0

我希望它向上/向下翻转而不是向左/轻，所以我的问题是我需要改变轴或角度吗？我一直在尝试，因为 2 个小时似乎没有任何工作。请指导我完成这个。这是小提琴。

HTML

<div class="flip" style="width: X.px; height: X.px;">
    <a href="#">
        <div class="flip-front">
            <img src="http://divabetic.files.wordpress.com/2012/07/dai-mcdonalds-400-calories280.jpg">
        </div>
           <div class="flip-back">
            <img src="http://divabetic.files.wordpress.com/2012/07/dai-mcdonalds-400-calories280.jpg">
        </div>
    </a>
</div>

CSS

.flip {
    position: relative;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
}
.flip .flip-front, .flip .flip-back {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.75s;
    -moz-transition: 0.75s;
    -o-transition: 0.75s;
    transition: 0.75s;
}
.flip .flip-front {
    z-index: 5;
}
.flip .flip-back {
    z-index: 0;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);

}
.flip:hover .flip-front {
    z-index: 5;
    -webkit-transform: rotateY(270deg);
    -moz-transform: rotateY(270deg);
    -ms-transform: rotateY(270deg);
    -o-transform: rotateY(270deg);
    transform: rotateY(270deg);
}
.flip:hover .flip-back {
    z-index: 5;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
}
4

3 回答 3

1

您提到了两次翻转：悬停，这将覆盖前一次，并且无需使用您使用 filp-back & front 的图像的后部。在旋转部分使用 rotateX(360deg) 。这将为您提供所需的完美解决方案。>
jsfiddle 链接
jsfiddle

于 2013-09-09T15:31:59.400 回答
1

您想将旋转轴更改为您的情况下的 X 轴。基本上，使用rotateX()而不是rotateY()所以这里是更新的小提琴和 CSS：

.flip {
    position: relative;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
}
.flip .flip-front, .flip .flip-back {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.75s;
    -moz-transition: 0.75s;
    -o-transition: 0.75s;
    transition: 0.75s;
}
.flip .flip-front {
    z-index: 5;
}
.flip .flip-back {
    z-index: 0;
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    transform: rotateX(-180deg);

}
.flip:hover .flip-front {
    z-index: 5;
    -webkit-transform: rotateX(270deg);
    -moz-transform: rotateX(270deg);
    -ms-transform: rotateX(270deg);
    -o-transform: rotateX(270deg);
    transform: rotateX(270deg);
}
.flip:hover .flip-back {
    z-index: 5;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

仍然发生了一些奇怪的双重旋转，但是由于您的示例中存在这种情况，因此我没有尝试修复它，因为我不确定您要达到什么效果。

编辑：

另外，如果我了解发生了什么，那么您那里有一个不必要的重复元素。在这里，我删除了额外的元素，并通过将单个元素旋转 360 度而不是两个 180 度来修改 CSS 以获得相同的效果。小提琴。我还修改了代码以将绝对宽度和高度应用于.flipdiv，这样当元素旋转时 div 折叠时，您就不会在 Firefox 中获得双重旋转。

HTML：

<div class="flip"> 
    <a href="#">
        <div class="flip-front">
            <img src="http://divabetic.files.wordpress.com/2012/07/dai-mcdonalds-400-calories280.jpg">
        </div>
    </a>
</div>

CSS：

.flip {
    position: relative;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
    height: 186px;
    width: 280px;
}
.flip .flip-front {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.75s;
    -moz-transition: 0.75s;
    -o-transition: 0.75s;
    transition: 0.75s;
}
.flip .flip-front {
    z-index: 5;
}
.flip:hover .flip-front {
    z-index: 5;
    -webkit-transform: rotateX(360deg);
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -o-transform: rotateX(360deg);
    transform: rotateX(360deg);
}
于 2013-09-09T15:02:09.710 回答
0

正如 George Yates 所说，您必须将变换更改为 rotateX。

既然你说你想在后面有一个不同的图像，这是你的 CSS：

.flip {
    position: relative;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
    -webkit-perspective-origin-x: 140px;
    -moz-perspective-origin-x: 140px;
    -ms-perspective-origin-x: 140px;
    perspective-origin-x: 140px;
}
.flip .flip-front, .flip .flip-back {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.75s;
    -moz-transition: 0.75s;
    -o-transition: 0.75s;
    transition: 0.75s;
}
.flip .flip-front {
    z-index: 5;
}
.flip .flip-back {
    z-index: 0;
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    transform: rotateX(-180deg);

}
.flip:hover .flip-front {
    z-index: 5;
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    transform: rotateX(180deg);
}
.flip:hover .flip-back {
    z-index: 5;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

我还在翻转类中添加了一个透视原点，以使您的观点居中。您看到的向左旋转是一种透视效果，您正在寻找一个居中的旋转，但您的观点在翻转类中居中，比图像大。

所以，你的观点是向右，使旋转看起来向左。将透视原点 x 设置为 140px 使其位于图像的中心

更新的演示

于 2013-09-09T16:48:31.043 回答