java script 如何將盒子裡的東西佈局360度。
阿新 • • 發佈：2018-11-01
<!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;}
.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/2.png" height="" width="" alt="描述"/> </li>
<li> <img src="image/3.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;}
.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/2.png" height="" width="" alt="描述"/> </li>
<li> <img src="image/3.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>