<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background: lightblue;
}
div.box{
/*position: absolute;*/
width: 200px;
height: 300px;
/*left: 600px;
top: 100px;*/
margin: 100px auto;

transform-style: preserve-3d;

animation: rotateit 10s linear infinite;
}
.box div{
width: 200px;
height: 300px;
position: absolute;
border: 2px solid lightcoral;
top: 0;
left: 0;
background: url(img/test.jpg);
background-size: 100% 100%;
}
/*先转然后移出*/
.box div:nth-child(1){
transform: rotateY(30deg) translateZ(400px);
}
.box div:nth-child(2){
transform: rotateY(60deg) translateZ(500px);
}
.box div:nth-child(3){
transform: rotateY(90deg) translateZ(400px);
}
.box div:nth-child(4){
transform: rotateY(120deg) translateZ(500px);
}


.box div:nth-child(5){
transform: rotateY(150deg) translateZ(400px);
}
.box div:nth-child(6){
transform: rotateY(180deg) translateZ(500px);
}
.box div:nth-child(7){
transform: rotateY(210deg) translateZ(400px);
}
.box div:nth-child(8){
transform: rotateY(240deg) translateZ(500px);
}

.box div:nth-child(9){
transform: rotateY(270deg) translateZ(400px);
}
.box div:nth-child(10){
transform: rotateY(300deg) translateZ(500px);
}
.box div:nth-child(11){
transform: rotateY(330deg) translateZ(400px);
}
.box div:nth-child(12){
transform: rotateY(360deg) translateZ(500px);
}

.box div:hover{
transform: rotateY(360deg) translateZ(600px);
/*transform: rotateY(360deg);*/
width: 800px;
height: 1200px;
position: absolute;
top: -200px;
/*left: -600px;*/
/*margin: 100px auto;*/
animation: move 10s linear infinite;
}


@keyframes rotateit{
0%{
transform: rotateX(5deg) rotateY(0deg);
}
50%{
transform: rotateX(-5deg) rotateY(180deg);
}
100%{
transform: rotateX(5deg) rotateY(360deg);
}
}
/*@keyframes move{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(360deg);
}
}*/
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>

纯css3图片旋转展示的更多相关文章

  1. jQuery图片旋转展示收缩效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 纯css3实现旋转的太极图

    效果图: 代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta charset=&quo ...

  3. 纯CSS3图片反转

    一些简单实用的小技巧,CSS3对图片进行翻转,显示另一面的文字,或者图片效果,那么具体怎样去做呢?一起来看看吧. 在CSS3中,可以使用transform-style: preserve-3d进行3d ...

  4. CSS3图片旋转特效

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  5. css3图片旋转

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  6. html5+css3图片旋转特效

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

  7. CSS3 图片旋转

    .nav_all { position:relative; z-index:; width:172px; display:inline; ; } .nav_all b { display:block; ...

  8. 精选 5 个漂亮的 CSS3 图片滑过特效

    这篇文章将为大家分享5款漂亮的CSS3图片滑过特效,比如滑过后显示图片的详细文字介绍,又比如滑过后对图片进行淡入淡出的效果等等.让我们一起来看看,喜欢的朋友赶紧收藏. 1.非常酷的CSS3图片说明效果 ...

  9. 纯css3 3D图片立方体旋转动画特效

    纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...

随机推荐

  1. 计算机程序的思维逻辑 (47) - 堆和PriorityQueue的应用

    45节介绍了堆的概念和算法,上节介绍了Java中堆的实现类PriorityQueue,PriorityQueue除了用作优先级队列,还可以用来解决一些别的问题,45节提到了如下两个应用: 求前K个最大 ...

  2. JS组件系列——Bootstrap文件上传组件：bootstrap fileinput

    前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...

  3. mssql 字增自段怎样重置（重新自增）|清空表已有数据

    方法1 -- 清空已有数据,并且将自增自段恢复从1开始计数 truncate table 表名 方法2 -- 不清空已有数据,但将自增自段恢复从1开始计数 dbcc checkident(表名,RES ...

  4. Quartz.NET Windows 服务示例

    想必大家在项目中处理简单的后台持续任务或者定时触发任务的时候均使用 Thread 或者 Task 来完成,但是项目中的这种需求一旦多了的话就得将任务调度引入进来了,那今天就简单的介绍一下 Quartz ...

  5. RHEL6.4 + Oracle 11g DG测试环境快速搭建参考

    环境现状: 两台虚拟主机A和B: 1. A机器已安装ASM存储的Oracle 11g 实例      参考:http://www.cnblogs.com/jyzhao/p/4332410.html 2 ...

  6. java netty socket库和自定义C#socket库利用protobuf进行通信完整实例

    之前的文章讲述了socket通信的一些基本知识,已经本人自定义的C#版本的socket.和java netty 库的二次封装,但是没有真正的发表测试用例. 本文只是为了讲解利用protobuf 进行C ...

  7. iis6.0与asp.net的运行原理

    这几天上网翻阅了不少前辈们的关于iis和asp.net运行原理的博客,学的有点零零散散,花了好长时间做了一个小结(虽然文字不多,但也花了不少时间呢),鄙人不才,难免有理解不道的地方,还望前辈们不吝赐教 ...

  8. LINQ to SQL语句(14)之Null语义和DateTime

    Null语义 说明:下面第一个例子说明查询ReportsToEmployee为null的雇员.第二个例子使用Nullable<T>.HasValue查询雇员,其结果与第一个例子相同.在第三 ...

  9. 浅析linux内核中的idr机制

    idr在linux内核中指的就是整数ID管理机制,从本质上来说,这就是一种将整数ID号和特定指针关联在一起的机制.这个机制最早是在2003年2月加入内核的,当时是作为POSIX定时器的一个补丁.现在, ...

  10. Python09作业思路及源码：高级FTP服务器开发（仅供参考）

    高级FTP服务器开发 一,作业要求 高级FTP服务器开发 用户加密认证(完成) 多用户同时登陆(完成) 每个用户有不同家目录且只能访问自己的家目录(完成) 对用户进行磁盘配额,不同用户配额可不同(完成 ...