静态效果图：

代码如下：

<!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. Web in Linux小笔记001

    Linux灾难恢复: Root密码修复 Centos single Filesystem是硬盘文件根目录,无法再cd ..就像macitosh 硬盘图标 Pwd:显示绝对路径 MBR修复 模拟MBR被 ...

  2. K好数--蓝桥杯

    JAVA版K好数--蓝桥杯 历经千辛万苦,也算是研究出来了这道题了. 这道题主要运用了动态规划(Dynamic Planning)的思想,何谓动态规划?其实就是将一个大问题分成一个个小问题,然后先通过 ...

  3. 201521123061 《Java程序设计》第十一周学习总结

    201521123061 <Java程序设计>第十一周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 本周学习的是如何解决多线程访问中的互斥 ...

  4. 201521123087 《Java程序设计》第6周学习总结

    1. 本周学习总结 2. 书面作业 clone方法1.1 Object对象中的clone方法是被protected修饰,在自定义的类中覆盖clone方法时需要注意什么?                 ...

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

    1. 本周学习总结 2. 书面作业 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结果. 1.2 ...

  6. 201521123080《Java程序设计》第5周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2. 书面作业 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过? ...

  7. 201521123087 《Java程序设计》第5周学习总结

    1. 本周学习总结 2. 书面作业 作业参考文件下载 代码阅读:Child压缩包内源代码1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结 ...

  8. 201521123071 《JAVA程序设计》第十二周学习总结

    第12周作业-多线程 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件线程相关内容. 2. 书面作业 1. 字符流与文本文件:使用 PrintWriter(写),Buff ...

  9. Java 第十一周总结

    1. 本周学习总结 2. 书面作业 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synchronized修饰方法实现互斥同步访问,还有什么办法实现互斥同步访 ...

  10. 201521123056 《Java程序设计》第13周学习总结

    1. 本周学习总结 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? 1.1 答: ...