写在前面

其实说了很多都是和公司业务相关的效果，前段时间领导要求做一个首页展示卡片翻转效果，但是我一门心思想着JS实现，后面出现了一个可悲的现象，就是我写好的代码被加密了，还不能复原，关键是git也没有提交，这不我试着换一种方式去做到那个卡片翻转效果。于是在周末前夜我就准备整理一篇关于CSS3如何实现3D旋转效果。

涉及知识点

CSS3如何实现卡片翻转效果，CSS3如何实现3D旋转效果，CSS实现卡片动态效果，页面实现dom翻转效果，好看的CSS样式特效。
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。

效果展示

其实这个就是为了让更多的人能够选择性是否继续阅读这篇文章，为大家精准定位自己想要的demo，文尾有完整代码包下载链接。
在这里插入图片描述

1、web页面的搭建

在制作这个页面的时候首先就是构思，正常demo都是拿一个dom节点来示例，我选择整3个，这样的话看着舒服点。

1）创建dom节点

首先创建四个dom节点，采用浮动式布局（float:left）
在这里插入图片描述

Html代码如下：

<div class="hdddom">
    <div class="hdd-3d">
    </div>
    <div class="hdd-3d">
    </div>
    <div class="hdd-3d">
    </div>
    <div class="hdd-3d">
    </div>
</div>

CSS代码如下：

/* 原创于CSDN博主-拄杖盲学轻声码 */
body {
    background-color: #EFEFEF;
}

.hdddom {
    width: 1000px;
    height: 600px;
    overflow: hidden;
    margin: 0 auto;
}

.hdd-3d {
    width: 40%;
    height: 200px;
    margin-bottom: 30px;
    margin-left: 20px;
    float: left;
    background-color: #fff;
}

2）DOM元素添加图片

其中主要是在div标签里面添加了一个figure标签，然后将img放入里面，设置好样式即可，如下所示效果：
在这里插入图片描述

3）添加翻转后的文字

其实这个只要在刚才第二步的figure标签里面添加一个文字标签即可，我是添加了一个figcaption标签，然后就可以重点去整效果了。
添加后效果：
在这里插入图片描述

2、CSS效果的实现

1）div本身翻转效果

主要使用了transform是CSS3中具有代表性的动效特征，它可以实现元素的旋转、倾斜、位移、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，
可以取代绝大多数以前采用flash制作的动图效果，当然在这边我主要是先用它的translateY属性。它主要是实现y轴方向，添加样式如下：

.hdd-3d:hover figure {
    transform: rotateY(.5turn);
}

添加样式后的效果如下：

2）3D翻转效果

这个主要是在于一个属性的设置transform-style: preserve-3d;
然后再加上一个过渡效果，整体样式设置如下：

.hdd-3d figure {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: 1s transform;
    font-size: 1.6rem;
    margin: 0;
}

另外翻转后文字的样式也要做一个动态翻转设置：

.hdd-3d figure figcaption {
    position: absolute;
    width: 100%;
    height: 80%;
    top: 0;
    transform: rotateY(.5turn) translateZ(1px);
    background: rgba(255, 255, 255, 0.9);
    text-align: center;
    padding-top: 10%;
    opacity: 0.6;
    transition: 1s .5s opacity;
}