css 图片3d翻转

CSS是前端开发中重要的一环，其中之一便是利用CSS做出炫酷的特效。今天我们要讲的是如何用CSS实现图片3D翻转的效果。

.front{
    width: 300px;
    height: 400px;
    position: absolute;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform: perspective(2000px) rotateY(0deg);
    -webkit-transform: perspective(2000px) rotateY(0deg);
    -moz-transform: perspective(2000px) rotateY(0deg);
    -o-transform: perspective(2000px) rotateY(0deg);
    transition: all ease-in-out 0.5s;
    -webkit-transition: all ease-in-out 0.5s;
    -moz-transition: all ease-in-out 0.5s;
    -o-transition: all ease-in-out 0.5s;
}

.back{
    width: 300px;
    height: 400px;
    position: absolute;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform: perspective(2000px) rotateY(180deg);
    -webkit-transform: perspective(2000px) rotateY(180deg);
    -moz-transform: perspective(2000px) rotateY(180deg);
    -o-transform: perspective(2000px) rotateY(180deg);
    transition: all ease-in-out 0.5s;
    -webkit-transition: all ease-in-out 0.5s;
    -moz-transition: all ease-in-out 0.5s;
    -o-transition: all ease-in-out 0.5s;
}

.card:hover .front {
    transform: perspective(2000px) rotateY(-180deg);
    -webkit-transform: perspective(2000px) rotateY(-180deg);
    -moz-transform: perspective(2000px) rotateY(-180deg);
    -o-transform: perspective(2000px) rotateY(-180deg);
}

.card:hover .back {
    transform: perspective(2000px) rotateY(0deg);
    -webkit-transform: perspective(2000px) rotateY(0deg);
    -moz-transform: perspective(2000px) rotateY(0deg);
    -o-transform: perspective(2000px) rotateY(0deg);
}

css 图片3d翻转

如上代码中，我们定义了一个这样的结构：前面是展示的图片，后面是展示的文字、图标等。这两个元素都拥有了三维空间效果，是由transform-style属性指定的，同时还利用了perspective(透视距离)，可以让元素在3D空间中呈现逼真的效果。并且利用了rotateY()函数让元素绕Y轴进行旋转。

最后通过鼠标交互事件，通过:hover，来控制翻转效果的实现，同时利用transition(渐变效果)来做出翻转动画效果。

以上就是CSS实现图片3D翻转的方法，希望可以给大家提供一些参考。

相关推荐