静态效果图：

代码如下：

<!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. 学会Git

    学会Git   目录 一.版本控制概要 1.1.什么是版本控制 1.2.常用术语 1.3.常见的版本控制器 1.4.版本控制分类 1.4.1.本地版本控制 1.4.2.集中版本控制 1.4.3.分布式 ...

  2. JSP小记

    0.配置servlet的模板 1.找Jar文件:\Common\plugins (myeclipse.ini文件中查看) * com.genuitec.eclipse.wizards*.jar 2.找 ...

  3. 【1414软工助教】团队作业7——Alpha冲刺之事后诸葛亮 得分榜

    题目 团队作业7--Alpha冲刺之事后诸葛亮 往期成绩 个人作业1:四则运算控制台 结对项目1:GUI 个人作业2:案例分析 结对项目2:单元测试 团队作业1:团队展示 团队作业2:需求分析& ...

  4. SNS团队Beta阶段第一次站立会议（2017.05.22）

    1.立会照片 2.每个人的工作 成员任务分工: 成员 今天已完成的工作 明天计划完成的工作 罗于婕 修改之前的文档 界面优化  龚晓婷 修改之前的文档 界面优化 林仕庄 修复不能发音bug  界面图标 ...

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

    201521123061 <Java程序设计>第八周学习总结 1. 本周学习总结 2. 书面作业 1.List中指定元素的删除(题目4-1) 1.1 实验总结 主要是应用到了list中的a ...

  6. 201521123039 《java程序设计》第七周学习总结

    1. 本周学习总结 2. 书面作业 ArrayList代码分析 1.1 解释ArrayList的contains源代码 答:ArrayList的Contains的源码如上图所示,如果o为null,那么 ...

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

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 查看脑图->多态与接口 1.2 可选:使用常规方法总结其他上课内容. 2. 书面作业 1.代码阅读:Child压缩包内源 ...

  8. Java课程设计 购物车系统（个人博客）

    1. 团队课程设计博客链接 课程设计 2. 个人负责模块或任务说明 编写ShoppingCart类,连接数据库 编写updateCart类,从数据库中获取商品信息,获取指定编号的商品信息 编写User ...

  9. 201521123070 《JAVA程序设计》第9周学习总结

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

  10. 201521123066《Java程序设计》第十三周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...