3d轮播盒子

14332223
197 阅读3分钟

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

前言

本文将要介绍如何实现一个3d的轮播图，具体的效果可以查看下面的代码，比较简单，暂时只能够支持使用4张图片，会用盒子切割的特效来进行图片之间的切换。

13308507737079909.gif

实现

实现过程

css 3d

在做这个之前，首先得先了解一下css3d的一些属性及其效果，

transform-style: preserve-3d; // 开启css3d效果

并且通过transform里面的 translate rotate 两个属性，这两个属性还可以分为三个坐标轴方向的设定，这样我们就可以形成一个四面的盒子，用来作为轮播使用。

/* 每个li元素里的第一个div */
ul li div:nth-of-type(1) {
    transform: translateZ(100px) rotateX(0deg);
    background-repeat: no-repeat;
    background-size: cover;
}
/* 每个li元素里的第二个div */
ul li div:nth-of-type(2) {
    transform: translateY(100px) rotateX(-90deg);
    background-repeat: no-repeat;
    background-size: cover;
}
/* 每个li元素里的第三个div */
ul li div:nth-of-type(3) {
    transform: translateZ(-100px) rotateX(-180deg);
    background-repeat: no-repeat;
    background-size: cover;
}
/* 每个li元素里的第四个div */
ul li div:nth-of-type(4) {
    transform: translateY(-100px) rotateX(-270deg);
    background-repeat: no-repeat;
    background-size: cover;
}

轮播效果

对于一个盒子来说，轮播的过程其实也就是将盒子进行旋转90度，两个按钮分别就是两个方向旋转，旋转就是通过设定 transform: rotateX 的角度，每次旋转90度即可，根据这个写一下两个按钮的点击事件。

并且我们可以设定一个数组用来存放当前的轮播状态，当我们按下右边的按钮的时候，轮播图会向前旋转90度，这时候我们在数组中加入一个90的元素，在按一次右边按钮，加入一个180的元素，这个元素也就代表着现在整个图像旋转的角度，左边的按钮同理就是负数的值。

image.png

类似于上面的方式，用于保存当前的轮播状态。

处理图片

然后就是对于图片的处理，我们可以使用两个属性，分别是 background-size: cover; 和 background-position ，background-size: cover; 这个属性是能够让图片完整的展示，background-position 是能够实现图片的偏移，让我们能够用多个盒子来组成一张完整的图片。

image.png

到这里我们就能够简单的实现这个轮播效果了。

总结

本文主要是通过css 3d 实现了一个简单的盒子轮播效果，但是效果比较简陋，并且还是存在着部分的问题，比如切换效果过于单一，图片格式要求比较严格，总之这个效果还有着很多需要完善的地方，以后有时间会更加完善这个例子。

avatar
文章
阅读
粉丝