效果示意图

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
.div1{
width: 1200px;
height: 500px;
background: #eee;
position: absolute;
left: 50%;
margin-left: -600px;
perspective:800px;
}
.div_contain{

transform-style: preserve-3d;
width: 300px;
height: 300px;
position: absolute;
left: 50%;
margin-left:-150px;
transition: transform 1s;
}
.img1{
width: 300px;
height: 300px;
box-shadow: 0 1px 3px rgba(0,0,0,.5);
position: absolute;
top: 60;
left: 50%;
margin-left: -150px;
transition: transform 1s;
}
</style>
</head>

<body>
<div class="div1">
<div class="div_contain" id="div_contain">
<img src="1.jpg" class="img1" id="#im1">
<img src="2.jpg" class="img1" id="#im2">
<img src="3.jpg" class="img1" id="#im3">
<img src="4.jpg" class="img1" id="#im4">
<img src="5.jpg" class="img1" id="#im5">
<img src="4.jpg" class="img1" id="#im6">
</div>
</div>

<script>
(function() {
if (typeof window.screenX === "number") {
$ = function(selector) {
return document.querySelector(selector);
}, $$ = function(selector) {
return document.querySelectorAll(selector);
};
var num = [...$$("img")];
let rotate = 360 / num.length;
let transZ = 150 / Math.tan((rotate / 2 / 180) * Math.PI);
let indexPiece = 0;
console.log(num);
for(let i = 0;i<num.length;i++){
num[i].style.transform="rotateY("+ i * rotate +"deg) translateZ("+ (transZ + 20) +"px)"
}

$("#div_contain").addEventListener("click", function() {
console.log(this.id);
$("#div_contain").style.transform = "rotateY("+ (-1 * rotate * ++indexPiece) +"deg)";
});

} else {
alert("您好您的浏览器版本过低");
}
})();
</script>
</body>
</html>

transform复习之图片的旋转木马效果的更多相关文章

  1. 使用iCarousel的旋转木马效果请求图片

    使用iCarousel的旋转木马效果请求图片 https://github.com/nicklockwood/iCarousel 先看看效果: 源码如下: // // RootViewControll ...

  2. 利用CSS3D效果制作简易旋转木马效果

    最近看一下css3d的一些特性,想着也实验学习一下,制作个小demo之类的.就练习了一下.开发一个粗糙的选择木马效果,如图 其实就是找到角度和位置,计算每根柱子的旋转角度摆放到3d空间的置顶位置即可. ...

  3. HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相册

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...

  4. HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相冊

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...

  5. Elastislide - 响应式的图片循环展示效果

    Elastislide 是一款非常优秀的响应式 jQuery 图片循环展示(旋转木马)插件,集成了 Touchwipe 插件以支持触屏设备.提供了四种效果:水平图片传送带.垂直图片传送带.固定在屏幕底 ...

  6. jquery.roundabout.js实现3D图片层叠旋转木马切换

    最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js. 兼容性如图: html结构代码: <div id="featured-area& ...

  7. HTML5鼠标hover的时候图片放大的效果展示

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. css3图片3D翻转效果

    点击图片看翻转效果 html结构 <div class="flip"> <div class="front"> <img src= ...

  9. Android UI - 实现广告Banner旋转木马效果

    Android UI - 实现广告Banner旋转木马效果 前言 本篇博客要分享的一个效果是实现广告Banner轮播效果,这个效果也比較常见,一些视频类应用就常常有,就拿360影视大全来举例吧: 用红 ...

随机推荐

  1. c语言基础学习08_关于内存管理的复习

    =============================================================================对于c语言来讲,内存管理是一个很重要的内容,它 ...

  2. [国嵌攻略][047][MMU功能解析]

    MMU功能解析 1.Memory Management Unit(存储器管理单元) 2.两个进程读取同一个地址能读到不同的值.因为进程访问的是虚拟地址,通过MMU转换成不同的物理地址.不同的进程通过M ...

  3. python爬取拉勾网职位数据

    今天写的这篇文章是关于python爬虫简单的一个使用,选取的爬取对象是著名的招聘网站--拉钩网,由于和大家的职业息息相关,所以爬取拉钩的数据进行分析,对于职业规划和求职时的信息提供有很大的帮助. 完成 ...

  4. 《图解http》知识点笔记

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Helvetica } p.p2 { margin: 0.0px 0.0px 0.0px 0. ...

  5. javascript 之继承-15

    继承 所谓继承就是子类继承父类的特征与行为,使得子类对象具与父类相同的行为.但是javascript 是没有class.抽象类.接口等抽象概念,javascript 只有对象,那么js中是如何让对象与 ...

  6. phpstorm（或webstorm） 打开后 一直停留在scanning files to index....，或跳出内存不够的提示框

    记得3月份做项目时就遇到过这个问题,当时解决的 ,但是忘记怎么解决的啦,所以 ,写博文是多么的重要啊. 说明: 在npm install 后,会出现Scanning files to index .. ...

  7. 在MAC电脑上抓取iphone数据包的方法

    一.说明: 1.整个抓包操作的过程中,手机必须一直通过USB链接MAC电脑 2.手机系统要求在IOS5以上,因为使用的RVI技术在IOS5以后的系统中才有 3.抓包过程中,手机可以使用任何网络2G.3 ...

  8. HTML <a href >标签的target属性

    规定在何处打开链接文档. _blank    在新窗口中打开被链接文档 _parent  在父框架集中打开被链接文档 _self      默认.在相同的框架中打开被链接文档 _top      在整 ...

  9. ThinkPhp关闭Debug后出错解决方案

    注:我使用的是ThinkPHP的3.2版本,其他版本类似 从自己入手PHP开发以来,一直使用的是ThinkPHP的框架,前几天偶然间碰到了一个错误,在Debug模式下网站一切正常,而关闭Debug进行 ...

  10. 我的Android手册

    目录解释说明 assets文件说明 app_id:机智云 app id app_secret:机智云 app secret product_key:机智云 product key wifi_type_ ...