<!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. Android随笔之——Android时间、日期相关类和方法

    今天要讲的是Android里关于时间.日期相关类和方法.在Android中,跟时间.日期有关的类主要有Time.Calendar.Date三个类.而与日期格式化输出有关的DateFormat和Simp ...

  2. APP测试入门篇之APP基础知识(001)

    前言        最近两月比较多的事情混杂在一起,静不下心来写点东西,月初想发表一遍接口测试的总结,或者APP测试相关的内容,一晃就月底了,总结提炼一时半会也整不完.放几个早年总结内部培训PPT出来 ...

  3. ES6笔记（5）-- Generator生成器函数

    系列文章 -- ES6笔记系列 接触过Ajax请求的会遇到过异步调用的问题,为了保证调用顺序的正确性,一般我们会在回调函数中调用,也有用到一些新的解决方案如Promise相关的技术. 在异步编程中,还 ...

  4. 利用rebase来压缩多次提交

    我们可以用Git merge –squash来将分支中多次提交合并到master后,只保留一次提交历史.但是有些提交到github远程仓库中的commit信息如何合并呢? 历史记录 首先我们查看一下m ...

  5. 《高性能javascript》 领悟随笔之-------DOM编程篇(二)

    <高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

  6. 用Middleware给ASP.NET Core Web API添加自己的授权验证

    Web API,是一个能让前后端分离.解放前后端生产力的好东西.不过大部分公司应该都没能做到完全的前后端分离.API的实现方式有很 多,可以用ASP.NET Core.也可以用ASP.NET Web ...

  7. 『.NET Core CLI工具文档』（七）dotnet-new

    说明:本文是个人翻译文章,由于个人水平有限,有不对的地方请大家帮忙更正. 原文:dotnet-new 翻译:dotnet-new 名称 dotnet-new -- 创建一个新的 .NET Core 项 ...

  8. 扩展方法解决LinqToSql Contains超过2100行报错问题

    1.扩展方法 using System; using System.Collections.Generic; using System.Linq; using System.Web; using Sy ...

  9. apache.commons.io.IOUtils: 一个很方便的IO工具库(比如InputStream转String)

    转换InputStream到String, 比如 //引入apache的io包 import org.apache.commons.io.IOUtils; ... ...String str = IO ...

  10. 课堂Java小程序（加减乘除与验证码）

    一.编写一个程序,用户输入两个数,求出其加减乘除,并用消息框 显示计算结果. 1.设计思想:从键盘输入两个数字和运算符,然后计算.将输入的数字及运算符由字符型转换为整型,再用if判断输入的运算符,根据 ...