静态效果图：

代码如下：

<!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. 结对编程-四则运算生成程序-GUI界面

    201421123118 张中结 201421123098 胡丹丹 a.需求分析 这个程序做成GUI(可以是Windows PC 上的,也可以是Mac.Linux,web,手机上的),成为一个有基本功 ...

  2. Java学习7——一些注意的地方

    (学习运算符.if和switch分支.for与while与do...while循环.break和continue.递归,内容和C++没差,挑了几个注意点) 运算符 逻辑与(&)和短路与(&am ...

  3. 201521123072《java程序设计》第三周学习总结

    201521123072<java程序设计>第三周学习总结 标签: java学习 1. 本周学习总结 2. 书面作业 1,代码阅读 public class Test1 { private ...

  4. JAVA课程设计-----加减法测试博客

    1.团队成员介绍(一个人做的) 谢季努:网络1513 201521123079 2.项目git地址 3.项目git提交截图 4.项目运行截图 输入答案后点击确认就会出现本次的得分 如果觉得成绩不理想点 ...

  5. 201521123118《java程序与设计》第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容 2. 书面作业 1. 互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synch ...

  6. ACM退役记&&回忆录

    ACM退役记 2017.9.19星期二,"九一八事变"八十六年后的第二天,永远记住这个日子,刚好是我报名ACM到现在,刚好满一年,而今天正是我注册杭州电子科技大学OJ的时间(就是这 ...

  7. 谈谈浏览器http缓存

    请求头 user-agent pragma Cache-control Referer Accept Cookit If-Modified-Since If-None-Match 响应头 conten ...

  8. Apache Spark RDD（Resilient Distributed Datasets）论文

    Spark RDD(Resilient Distributed Datasets)论文 概要 1: 介绍 2: Resilient Distributed Datasets(RDDs) 2.1 RDD ...

  9. String类的常见面试题（3）

    1.判断定义为String类型的s1和s2是否相等 String s1 = "abc"; //这个"abc"对象首先会进常量池 String s2 = &quo ...

  10. WILL吃桃_KEY

    WILL 吃桃 (peach.pas/c/cpp) [ 题目描述] Will 很喜欢吃桃, 某天 Will 来到了一片森林, 森林中有 N 颗桃树, 依次编号为 1,2,„,N.每棵树上有数量不等的桃 ...