- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title > 无标题文档 </title>
- <style>
- *{
- padding:0;
- margin:0;
- }
- body{
- background:#000;
- }
- photos{
- width:110px;
- height:168px;
- margin:160px auto;
- transform:rotateY(0deg); /*-- 沿着 Y 轴旋转 0 度 */
- transform:rotateX(-10deg);
- transform-style:preserve-3d;/* 设置 3d 环境 */
- }
- photos img{
- width:100%;
- height:100%;
- position:absolute;
- box-shadow:0 0 8px #eaeaea;
- box-shadow: 1px -1px 6px #666;
- border-radius:4px;
- -webkit-box-reflect:below 3px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5)); // 上下倒影
- cursor:pointer; // 鼠标移上去时, 鼠标指针发生变化
- }
- photos div{ width:1200px;
- height:1200px;
- border-radius:50%;
- position:absolute;
- top:102%;
- left:50%;
- margin-left:-600px;
- margin-top:-600px;
- transform:rotateX(90deg);
- background:-webkit-radial-gradient(center center,600px 600px,rgba(158,158,222,0.5),rgba(0,0,0,0)); }
- </style>
- </head>
- <body>
- <div id="photos">
- <img src="img/active-1.png">
- <img src="img/active-2.png">
- <img src="img/active-3.png">
- <img src="img/active-4.png">
- <img src="img/active-3.png">
- <img src="img/active-2.png">
- <div></div>
- </div>
- </body>
- <script>
- var photosDom = document.getElementById('photos');
- var images = photosDom.getElementsByTagName('img'); // 获取图片数组
- var len = images.length; // 获取图片数量
- var deg = Math.floor(360 / len); <!-- 计算每张图片按 Y 轴旋转的角度 -->
- for(var i = 0; i <len;i++)
- { images[i].style = 'transform : rotateY(' + deg i + 'deg) translateZ(380px)'; }//deg 前面不要加空格
- var x = 0;
- setInterval(function()
- { photosDom.style.transform = "rotateX(-10deg) rotateY("+ (x++) 0.2 +"deg)"; }
- ,30);
- </script>
- </html>
来源: http://www.qdfuns.com/article/48234/179d4e433bf188fd3ff234d74e45e263.html