静态效果图：

代码如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
ul{
width: 200px;
height: 200px;
list-style: none;
margin: 100px auto;
position: relative;
transform-style: preserve-3d;
animation:xuanzhuan 6s linear infinite;
}
ul li{
width: 200px;
line-height: 200px;
text-align: center;
position: absolute;
left: 0;
top: 0;
}
ul li:nth-child(1){
background-color: red;
transform:rotateY(60deg) translateZ(200px);
}
ul li:nth-child(2){
background-color: orange;
transform:rotateY(120deg) translateZ(200px);
}
ul li:nth-child(3){
background-color: yellow;
transform:rotateY(180deg) translateZ(200px);
}
ul li:nth-child(4){
background-color: green;
transform:rotateY(240deg) translateZ(200px);
}
ul li:nth-child(5){
background-color: tomato;
transform:rotateY(300deg) translateZ(200px);
}
ul li:nth-child(6){
background-color: blue;
transform:rotateY(360deg) translateZ(200px);
}
ul:hover{
animation-play-state:paused;
}
@keyframes xuanzhuan{
from{
transform:rotateX(-10deg) rotateY(0deg);
}
to{transform:rotateX(-10deg) rotateY(360deg);
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>

CSS3实现3D旋转相册的更多相关文章

  1. css3制作3d旋转相册

    此处只是记录,解析可见原文:http://www.cnblogs.com/skyblue-li/p/6092799.html <!DOCTYPE html> <html xmlns= ...

  2. 低调奢华 CSS3 transform-style 3D旋转

    点击这里查看效果:http://keleyi.com/a/bjad/s89uo4t1.htm 效果图: CSS3 transform-style 属性 以下是代码: <!DOCTYPE html ...

  3. css3+jquery制作3d旋转相册

    首先来看一下今天的炫酷效果: 首先分析一下这张图片: 1.每张图片都有倒影 2.这11张图片呈圆形均匀排列 3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的) 那下面就开始吧. 一.准 ...

  4. 3D旋转相册（适合新手）

    <!DOCTYPE HTML> <html onselectstart="return false"> <head> <meta char ...

  5. css3之3D 旋转立方体与哆啦A梦

    主要记录两个css3 3D转换的示例   ㈠哆啦A梦 三个哆啦A梦的图片,分别让其围绕X轴,Y轴,Z轴旋转60度,鼠标放上开始发生变化. 具体代码如下图所示: <!DOCTYPE html> ...

  6. 3D旋转相册的实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. css3作3D旋转视频展示

    代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...

  8. CSS3制作3D旋转视频展示区

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. css3的3D和2D

    css3的3D旋转:rorateX():参数为正值时,盒子是围绕x轴,完成从Y轴正方向到Y轴负方向的旋转,视觉上呈现高度上的变化.rorateY():参数为正值时,盒子是围绕Y轴,完成从X轴正方向到X ...

随机推荐

  1. jQ的一些常识

    $(window).width()//可视区宽度 $(document).width()//整个页面文档流的宽度 $('body').width()//body元素的宽度(注意jQ获取body对象有引 ...

  2. 【2017集美大学1412软工实践_助教博客】团队作业10——项目复审与事后分析（Beta版本）

    写在前面的话 转眼轰轰烈烈本学期的软工实践就结束了,这个过程中想必在熬夜敲代码,激烈讨论中留下诸多回忆的同时,也收获了不少.恭喜所有团队完成了本阶段冲刺,此外,由于大家的贡献分给的都很平均,将个人贡献 ...

  3. 201521123063 《Java程序设计》 第4周学习总结

    1.本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 类设计 一般在设计类的时候,要考虑这些类是否有共性,还要考虑其独特性,使共同的父类拥有这些共性 ...

  4. 201521123049 《JAVA程序设计》 第3周学习总结

    1. 本周学习总结 1.学习了对象与类的定义: 2.掌握了构造函数与其重载: 3.学会了this关键字的利用: 4.明白了静态变量与非静态变量的区分. 下面是对本周学习的图片小结: 2. 书面作业 Q ...

  5. 201521123032 《Java程序设计》第10周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出 ...

  6. 201521123052《Java程序设计》第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己 ...

  7. 201521123045 《JAVA程序设计》 第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...

  8. phpcms图文总结（转）

    转自:http://www.cnblogs.com/Braveliu/p/5074930.html 在实现PHPCMS网站过程中,根据业务需求,我们遇到很多问题,特此总结如下,以便大家参考学习. [1 ...

  9. 史上最全CentOS安装教程，图文结合

    这是我最近整理的一份最全的CentOS安装步骤,亲自测试步骤,步步都有截图,步骤清晰.按此教程可轻松装机,并且安装成功的主机能访问外部网络. 闲话不说,首先介绍一下本教程用到工具: VMware Wo ...

  10. POJ 3190 Stall Reservations （优先队列）C++

    Stall Reservations Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7646   Accepted: 271 ...