java script 如何将盒子里的东西布局360度。
来源：互联网 发布：淘宝举报中心网址 编辑：程序博客网 时间：2024/06/10 03:12
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述信息">
<title>520</title>
<style type="text/css">
*{margin:0;padding:0;}
.top {height:100px;width:400px;margin:60px auto;font-size:30px;font-family:"华文行楷";}
.box{width:310px;height:310px;margin:auto; perspective:800px;}
.box.pic{position:relative; transform-style:preserve-3d;}
.box ul li{ list-style:none; position:absolute; top:0; left:0;}
</style>
</head>
<body>
<div class="top">
<marquee behavior=alternate> 时光不老，我们不散.</marquee></div>
<div class="box">
<div class="pic">
<ul>
<li> <img src="image/1.png" height="" width="" alt="描述"/> </li>
<li> <img src="image/2.png" height="" width="" alt="描述"/> </li>
<li> <img src="image/3.png" height="" width="" alt="描述"/> </li>
<li> <img src="image/4.png" height="" width="" alt="描述"/> </li>
<li> <img src="image/5.png" height="" width="" alt="描述"/> </li>
<li> <img src="image/6.png" height="" width="" alt="描述"/> </li>
</ul>
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
$(".pic ul li").each(function(i){
var deg=360/6;
$(this).css({"transform":"rotateY("+deg*i+"deg) transLateZ(216px)"});
});
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述信息">
<title>520</title>
<style type="text/css">
*{margin:0;padding:0;}
.top {height:100px;width:400px;margin:60px auto;font-size:30px;font-family:"华文行楷";}
.box{width:310px;height:310px;margin:auto; perspective:800px;}
.box.pic{position:relative; transform-style:preserve-3d;}
.box ul li{ list-style:none; position:absolute; top:0; left:0;}
</style>
</head>
<body>
<div class="top">
<marquee behavior=alternate> 时光不老，我们不散.</marquee></div>
<div class="box">
<div class="pic">
<ul>
<li> <img src="image/1.png" height="" width="" alt="描述"/> </li>
<li> <img src="image/2.png" height="" width="" alt="描述"/> </li>
<li> <img src="image/3.png" height="" width="" alt="描述"/> </li>
<li> <img src="image/4.png" height="" width="" alt="描述"/> </li>
<li> <img src="image/5.png" height="" width="" alt="描述"/> </li>
<li> <img src="image/6.png" height="" width="" alt="描述"/> </li>
</ul>
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
$(".pic ul li").each(function(i){
var deg=360/6;
$(this).css({"transform":"rotateY("+deg*i+"deg) transLateZ(216px)"});
});
</script>
</body>
</html>
阅读全文
0 0
- java script 如何将盒子里的东西布局360度。
- 盒子里的东西
- 如何将vim里的东西复制粘贴到其他地方
- Java script 一些东西
- 盒子里的气球
- 盒子里的世界
- 盒子里的气球
- 盒子里的猫
- 爬取带ajax的网页信息，需要将java script里的内容解析成json的格式
- css3弹性盒子如何布局
- Java Script里Ajax操作
- 如何批量的更替数据库里的东西
- CSS3的神奇盒子布局
- css 盒子布局的问题
- 群里的东西...................
- 如何在模拟器里的sd卡存放东西
- 一些布局的东西
- 如何将文件里的手机号码反序？
- 总结2
- Putty远程登录VMware虚拟机Linux(Ubuntu)
- QT学习第一天-----基本操作
- PAT 几个pat
- 大数据的发展，伴随的将是软件工程师的渐退，算法工程师的崛起
- java script 如何将盒子里的东西布局360度。
- luogu P1006 传纸条
- strtok实现
- C# 开发的网络数据包抓取的的实现
- 什么是自定义MVC框架？
- 访问数据库的技术
- astron设计模式学习手记之门面模式
- hdu 1069 Monkey and Banana
- 如何使用Python处理Missing Data
