CSS3实现3D旋转相册
静态效果图:
代码如下:
<!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旋转相册的更多相关文章
- css3制作3d旋转相册
此处只是记录,解析可见原文:http://www.cnblogs.com/skyblue-li/p/6092799.html <!DOCTYPE html> <html xmlns= ...
- 低调奢华 CSS3 transform-style 3D旋转
点击这里查看效果:http://keleyi.com/a/bjad/s89uo4t1.htm 效果图: CSS3 transform-style 属性 以下是代码: <!DOCTYPE html ...
- css3+jquery制作3d旋转相册
首先来看一下今天的炫酷效果: 首先分析一下这张图片: 1.每张图片都有倒影 2.这11张图片呈圆形均匀排列 3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的) 那下面就开始吧. 一.准 ...
- 3D旋转相册(适合新手)
<!DOCTYPE HTML> <html onselectstart="return false"> <head> <meta char ...
- css3之3D 旋转立方体与哆啦A梦
主要记录两个css3 3D转换的示例 ㈠哆啦A梦 三个哆啦A梦的图片,分别让其围绕X轴,Y轴,Z轴旋转60度,鼠标放上开始发生变化. 具体代码如下图所示: <!DOCTYPE html> ...
- 3D旋转相册的实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css3作3D旋转视频展示
代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...
- CSS3制作3D旋转视频展示区
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css3的3D和2D
css3的3D旋转:rorateX():参数为正值时,盒子是围绕x轴,完成从Y轴正方向到Y轴负方向的旋转,视觉上呈现高度上的变化.rorateY():参数为正值时,盒子是围绕Y轴,完成从X轴正方向到X ...
随机推荐
- 字符编码笔记:ASCII,Unicode和UTF-8(转)
字符编码笔记:ASCII,Unicode和UTF-8 作者: 阮一峰 日期: 2007年10月28日 今天中午,我突然想搞清楚Unicode和UTF-8之间的关系,于是就开始在网上查资料. 结果,这个 ...
- 转:【Java集合源码剖析】Java集合框架
转载轻注明出处:http://blog.csdn.net/ns_code/article/details/35564663 Java集合工具包位于Java.util包下,包含了很多常用的数据结构, ...
- spring 注入使用注解(不用xml)
(一):导入spring4的jar包 (二):在xml中配置扫描的包 <context:component-scan base-package="entity">< ...
- 201521123080《Java程序设计》第7周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 1. ArrayList代码分析 1.1 解释ArrayList的contains源代码 源代码如下 分析: ...
- 201521123079《java程序设计》第7周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 public boo ...
- 201521123119《Java程序设计》第4周学习总结
1. 本周学习总结 2.书面作业 1.注释的应用 使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) 2.面向对象设计(大作业1,非常重要) 2.1 将在网上商城 ...
- 201521123002 《Java程序设计》第2周学习总结
<Java程序设计>第2周学习总结 1. 本章学习总结 String 1.String类的对象是不可变(immutable)的 2.拼接(+号) "PG"+13; (一 ...
- 201521123105《jave程序》第二周学习总结
1. 本周学习总结 学习了各种java数据类型以及各种运算符的使用 学习了一维,二维数组的用法 学习了String类对象使用 2. 书面作业 使用Eclipse关联jdk源代码,并查看String对象 ...
- Java补码表和位移运算符
在java中数据都是以二进制的形式保存的. 但是我们看到的数据怎么是10进制的? 因为java展示之前会自动调用toString()方法 这里以4位2进制为例,4位2进制只能表示16个数,即0-15. ...
- python 输出颜色的与样式的方法
上次遇到这个问题就想写下来,其实当时我也不怎么会,老师说这个东西不需要理解,只需要死记硬背,写的多了就记住了,所以今天搜集了几篇文章,加上自己的理解,写下了这篇python 输出颜色的样式与方法的文章 ...