(-1)写在前面
首先图片是我从互联网上下载的，向这位前辈致敬。我用的是chrome49，没有加不同浏览器的前缀，jquery3.0，图片资源放在了我的百度云盘上http://pan.baidu.com/s/1o7LyHp4
(1)知识预备
a.浏览器x、y、z轴的概念
左手竖代表y轴，右手横代表x轴，左右手摆成一个十字，z轴是即垂直x轴也垂直y轴穿过x、y交点的一条直线。
b. :nth-of-type(1)
img:nth-of-type(1)，所有有子元素img的父元素的第一个img子元素
body :nth-of-type(1) 等同于body *:nth-of-type(1)
(2)代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<script type="text/javascript" src="debug-jquery-3.0.0.js"></script>
<script type="text/javascript" src="base.js"></script>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>为了生活</title>
<style type="text/css">
*
{
margin-top:0px;
padding:0;
}
body
{
position:absolute;
}
#lol
{
width:530px;
height:530px;
position:absolute;
}
#lol img
{
display:block;
position:absolute;
border:1px #6F0000 solid;
}
#lol img:nth-of-type(1)
{
animation: one 10s linear 3s infinite;
}
@keyframes one
{
to
{
transform: rotateX(360deg);
}
}
#lol img:nth-of-type(2)
{
animation: two 10s linear 2s infinite;
}
@keyframes two
{
to
{
transform: rotateY(360deg);
}
}
#lol img:nth-of-type(3)
{
animation: three 10s linear 1s infinite;
}
@keyframes three
{
to
{
transform:rotateZ(360deg);
}
}
</style>
<script type="text/javascript">
$(function()
{
$("#lol").centerPos();
//让lol元素水平垂直居中显示，centerPos是自定义函数
})
$.fn.centerPos = function()
{
var parent;
this.each(function(index)
{
parent = this.parentNode;
if(parent == document.body)
{
parent = window;
}
var position = $(this).css("position");
if(position == "fixed" || position=="absolute")
{
$(this).css("left",($(parent).width()-this.offsetWidth)/2+"px")
.css("top",($(parent).height()-this.offsetHeight)/2+"px");
}
else
{
window.console.error("没有设置有效的position值");
}
})
return this;
}
</script>
</head
<body>
<div id="lol">
<img src="data:images/main5-pic1.png">
<img src="data:images/main5-pic2.png">
<img src="data:images/main5-pic3.png">
</div>
</body>
</html>