直接上代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="关键词，关键字">
<meta name="Description" content="描述信息">
<title>标题</title>
<style type="text/css">
<!--内外边距设置为0-->
*{margin:0;padding:0;}
<!--设置容器定义的top大小，字体大小（font-size:），字体类型（font-family），字体颜色（color）-->
.top{width:400px;height:100px;margin:60px auto;font-size:30px;font-family:"华文行楷";color:#00ff33}
<!--设置背景图片（background:url），-->
<!--设置容器大小，（ perspective 属性定义 3D 元素距视图的距离），-->
.box{width:310px;height:310px;margin:auto;perspective:800px;}
<!--设置3d视图时间-->
.pic{position:relative;transform-style:preserve-3d;/*3d*/animation: play 10s linear infinite;}
<!--去掉ul中li的·号，绝对定位（position:absolute;）-->
<!--设置旋转方向-->
@keyframes play{
from{transform:rotateY(0deg);}
to{transform:rotateY(360deg);}
}
</style>
</head>
<body>
<!--div盒子 容器层-->
<div class="top"><marquee behavior=alternate>时光不老我们不散</marquee></div>
<div class="box">
<div class="pic">
<ul>
<!--图片标签四要素-->
<li> <img src="images/1.png" height="" width="" alt="描述"/></li>
<li> <img src="images/2.png" height="" width="" alt="描述"/></li>
<li> <img src="images/3.png" height="" width="" alt="描述"/></li>
<li> <img src="images/4.png" height="" width="" alt="描述"/></li>
<li> <img src="images/5.png" height="" width="" alt="描述"/></li>
<li> <img src="images/6.png" height="" width="" alt="描述"/></li>
</ul>
</div>
</div>
<!--引用jq官方类库-->
<script src="js/jquery-1.11.1.min.js"></script>
<script>
//拿到每一个li
$(".pic ul li").each(function(i){
//根据y轴旋转
$(this).css({"transform":"rotateY("+deg*i+"deg)translateZ(216px)"
})
});
</script>
</body>
</html>
613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
