CSS3制作立方体轮播图

效果图

实现原理

使用一个无序列表ul，下有六个子元素li，代表长方体的六个面。
主要用到的属性：

transform: rotateX(n deg) translateZ(n px)
让li旋转之后再移动：这样有两个好处：1、有规律，好记，因为每次只需要改变rotateX()的值，每次增大 90^o，translateZ()的值不需要改变。但这是次要的。2、主要是图片从下方旋转上来，图片的方向都是正确的，上下没有颠倒。但是需要注意的是：旋转之后，坐标轴也会跟着旋转
transform-style: preserve-3d;
要给li的父级元素ul添加此属性，使li能够以立体的效果呈现
perspective: 800px;
要给ul的父级元素添加此属性，在本例中是body。因为旋转是整个ul在旋转，要让ul有一个近大远小的效果。
animate，让容器动起来。

注意点：其实一开始做出来是一个正方体，但显示的是长方体，从正方体变为长方体只需要将前后上下四个面伸长即可，scale(2,1)。

源码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>长方体轮播效果</title><style type="text/css">body,ul{margin: 0;padding: 0;}body{background-color: #EEEEEE;perspective: 800px; /* 要使ul能够呈现3D效果，需在ul的父级元素body上添加透视属性*/}ul {width: 200px;height: 200px;margin: 200px auto;transform-style: preserve-3d;position: relative;transform: rotateX(0deg);animation: rot 10s linear 0s infinite normal;}@keyframes rot {0% {transform:rotateX(0deg);}100% {transform:rotateX(360deg);}}ul>li{list-style: none;width: 200px;height: 200px;background-color: #424242;position: absolute;top: 0;left: 0;}ul:hover{  /* ul被覆盖，动画暂停*/animation-play-state: paused;}ul:hover li>img{opacity: 0.5;}ul>li:hover img{opacity: 1;}ul>li:nth-child(1){transform: rotateX(90deg) translateZ(100px) scale(2,1);}ul>li:nth-child(2){transform: rotateX(180deg) translateZ(100px) scale(2,1);}ul>li:nth-child(3){transform: rotateX(270deg) translateZ(100px) scale(2,1);}ul>li:nth-child(4){transform: rotateX(360deg) translateZ(100px) scale(2,1);}ul>li:nth-child(5){transform: rotateY(90deg) translateZ(-200px);}ul>li:nth-child(6){transform: rotateY(90deg) translateZ(200px);}</style></head><body><!-- 从正方体变为长方体只需要将前后上下四个面伸长即可，scale(2,1) --><!-- 注意：scale()，会连同元素里面的内容一起缩放 --><ul><li><img src="./images/img6.jpg"></li><!-- 顶面 --><li><img src="./images/img7.jpg"></li><!-- 后面 --><li><img src="./images/img8.jpg"></li><!-- 底面 --><li><img src="./images/img9.jpg"></li><!-- 前面 --><li>5</li><!-- 左面 --><li>6</li><!-- 右面 --></ul></body>
</html>

CSS3制作立方体轮播图相关推荐

网页制作使用CSS样式制作轮播教程,静态网页设计与开发 1.案例——CSS3制作图片轮播图（4）使用纯CSS3代码实现简单的图片轮播——分步骤实现.docx...
使用纯CSS3代码实现简单的图片轮播设计思路: 以5张图片为例: 1.基本布局: 通过设置每张图片的尺寸和父容器的尺寸,从而将5张图片横向并排放入一个div容器(#photos)内.所有图片设置统一 ...
CSS3 3D切割轮播图
一.效果图二.源码 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
html图片轮播思路,css3如何实现轮播图？css3实现轮播图片的方法
我们在网页上经常会看到有一块位置会有很多的图片来回切换,这就是轮播图,轮播图的出现,让重要的信息可以在一个位置显现,那么,轮播图是如何实现的呢?轮播图的实现用js或者css都可以,本篇文章就来给大家介 ...
html3d轮播图片效果,CSS3,3D效果轮播图
---恢复内遇新是直朋能到分览支体调容开始--- 大家还的候通现端数是制这.效合应近环大过这业据记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮在重说 ...
html百叶窗切换效果,纯CSS3百叶窗式切换轮播图特效
这是一款使用纯CSS3制作的百叶窗式切换轮播图特效.该特效使用背景图片来制作,在轮播图切换时,通过一组div元素来制作百叶窗效果,非常的炫酷. 使用方法 HTML结构该轮播图特效中使用了6张背景图片 ...
CSS3+JS切割轮播图
以下说明数据,是指有4张图片的轮播图,分别切割成4张. 首先,做成单张切换的立体效果,即通过旋转,确定四张图片的位置,分别是一个立方体的上下前后的图片翻转移动角度. .box ul li:nth-ch ...
纯css制作简易轮播图（animation、keyFrame）
主要是通过css3的动画及关键帧属性来设置图片的平移距离,以达到轮播图的效果 HTMl <body><div class="banner"><div ...
如何通过 HTML+CSS+JS 制作焦点轮播图
序言 [版权声明]:狸狸高度重视原创作者或者著作权人应该享有的著作权,严格遵守国家相关法律法规,系该文章内所引用到的实例并非百分之百对原作品进行还原.因此,即便是您完完整整的复制并粘贴了本文章内所有的 ...
纯css3实现无缝轮播图效果
主要就是利用css3中的动画了,看完整实现代码如下: <!DOCTYPE html> <html lang="en"> <head><me ...

CSS3制作立方体轮播图

效果图

实现原理

源码

CSS3制作立方体轮播图相关推荐

最新文章

热门文章