效果示意图

<!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. 将id传过去，根据id显示下面的详情页面

    官方demo:http://dev.dcloud.net.cn/mui/event/ 假设如下场景:从新闻列表页面进入新闻详情页面,新闻详情页面为共用页面,通过传递新闻ID通知详情页面需要显示具体哪个 ...

  2. [国嵌笔记][017][Makefile工程管理]

    Makefile的用途 1.make能够使整个程序的编译.链接只需一个命令就可以完成 2.make的工作主要依赖于Makefile的文件.Makefile文件描述了整个程序的编译.链接等规则,使之自动 ...

  3. HDU 2063 过山车（模板—— 二分图最大匹配问题）

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=2063  解题思路: 二分图最大匹配模板题. AC代码: #include<stdio.h> ...

  4. Hive_UDF函数中集合对象初始化的注意事项

    UDF函数中定义的集合对象何时初始化 udf函数放在sql中对某个字段进行处理,那么在底层会创建一个该类的对象,这个对象不断的去调用这个evaluate(...)方法,截图如下:   1.1 如果说对 ...

  5. Spark算子--coalesce和repartition

    coalesce和repartition--Transformation类算子 代码示例

  6. Lucene学习笔记1(V7.1)

    Lucene是一个搜索类库,solr.nutch和elasticsearch都是基于Lucene.个人感觉学习高级搜索引擎应用程序之前 有必要了解Lucene. 开发环境:idea maven spr ...

  7. 查看php的配置文件Php.ini的位置

    标签:php服务器 浏览器 配置文件 Linux local 近来,有不博友问php.ini存在哪个目录下?或者修改php.ini以后为何没有生效?基于以上两个问题,我觉得有必要教一下刚接触PHP的博 ...

  8. 关于VC++中virtual ~的含义

    我知道virtual 的虚函数定义,~CMainFrame( )是析构函数,用来释放内存.C++的继承和派生内容.所有可以被用作基类的类一般都用虚析构函数当基类对象的指针或引用调用派生类对象时,如果基 ...

  9. 【开发技术】Eclipse插件Call Hierarchy简介及设置

    Call Hierarchy 主要功能是 显示一个方法的调用层次(被哪些方法调,调了哪些方法) 在MyEclipse里Help - Software updates - Find and instal ...

  10. SpringMvc4.x--Spring MVC的常用注解

    //下列代码显示用到的对象public class DemoObj { private Long id; private String name; public DemoObj() { //① sup ...