广告的轮播效果层出不穷，其他的不说，这里不用js，纯css简单的实现类似广告位的3D滚动效果。

话不多说，直接上效果图：

上图效果，每隔2s就会翻转一次（gif图片与页面真实效果会有差异），而且翻转动作带有3D动画效果。

感觉是不是很酷，下面让我们用代码来实现它吧！

页面结构html：

<div class="ad_bg">
  <div class="ad_con">
    <div class="ad ad_1">广告1</div>
    <div class="ad ad_2">广告2</div>
    <div class="ad ad_3">广告3</div>
    <div class="ad ad_4">广告4</div>
  </div>
</div>

简单的div嵌套结构，如有需要，在最内层div里面添加图片，或者链接即可。

CSS代码：

首先我们需要先将四面广告布局成柱状立体结构，主要利用CSS3的transform属性，具体代码如下：

.ad{
  width: 500px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  font-size: 30px;
  position: absolute;
}
.ad_1{
  background-color: #ccc;
  transform: translateY(50px) translateZ(-50px) rotateX(-90deg);
}
.ad_2{
  background-color: green;
  transform: translateZ(-100px) rotateX(-180deg);
}
.ad_3{
  background-color: deeppink;
  transform: translateY(-50px) translateZ(-50px) rotateX(90deg);
}
.ad_4{
  background-color: yellowgreen;
}

然后，我们需要将广告位整体.ad_con设置为3d运动形式，光设置3d运动还不行，还必须为运动的舞台布景.ad_bg设置一个景深，这样才能看出3d效果。

怎么让其滚动起来呢，那么就用到了animation属性，设置运动时间为8s，匀速运动(一共4面，相当于每翻转1面用时2s)，infinite让运动形式无限循环下去。

CSS核心代码：

.ad_bg{
  width: 500px;
  height: 100px;
  margin: 150px auto;
  position: relative;
  perspective: 600px;/*设置景深*/
}
.ad_con{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  transform-style: preserve-3d;/*运动形式设为3d运动*/
  animation: move 8s linear infinite;
}

而move就用来描述我们的运动过程，一个完整的运动过程见如下代码：

@keyframes move {
0%{
  transform: translateZ(0px) translateY(0px) rotateX(0deg);
}
5%{
  transform: translateZ(-50px) translateY(-50px) rotateX(90deg);
}
25%{
  transform: translateZ(-50px) translateY(-50px) rotateX(90deg);
}
30%{
  transform: translateZ(-100px) translateY(0px) rotateX(180deg);
}
50%{
  transform: translateZ(-100px) translateY(0px) rotateX(180deg);
}
55%{
  transform: translateZ(-50px) translateY(50px) rotateX(270deg);
}
75%{
  transform: translateZ(-50px) translateY(50px) rotateX(270deg);
}
80%{
  transform: translateZ(0px) translateY(0px) rotateX(360deg);
}
100%{
  transform: translateZ(0px) translateY(0px) rotateX(360deg);
}
}

如此，我们便实现了类似广告位的3D滚动效果咯，是不是很简单啊！狠戳这里，查看效果。点赞，点赞

Over~拜