效果示意图

<!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. [学习OpenCV攻略][013][Mat - 基本图像容器]

    Mat 是一个类,由两个数据部分组成:矩阵头(包含矩阵尺寸,存储方法,存储地址等信息)和一个指向存储所有像素值的矩阵(根据所选存储方法的不同矩阵可以是不同的维数)的指针. 矩阵属于多个 Mat 对象, ...

  2. 用.net中的SqlBulkCopy类批量复制数据 （转载）

    在软件开发中,把数据从一个地方复制到另一个地方是一个普遍的应用. 在很多不同的场合都会执行这个操作,包括旧系统到新系统的移植,从不同的数据库备份数据和收集数据. .NET 2.0有一个SqlBulkC ...

  3. timeit模块

    算法是计算机处理信息的本质,因为计算机程序本质上是一个算法来告诉计算机确切的步骤来执行一个指定的任务.一般地,当算法在处理信息时,会从输入设备或数据的存储地址读取数据,把结果写入输出设备或某个存储地址 ...

  4. SVN报Previous operation has not finished; run 'cleanup'&

    做着项目突然SVN报Previous operation has not finished; run 'cleanup' if it was interrupted,进度又要继续,烦.百度一下发现很多 ...

  5. 主题：Windows系统服务器磁盘挂载

    可能很多人发现VPS重装之后D盘.E盘不见了,其实并没有不见只是磁盘未挂载,下面由小编来为大家讲讲如何挂载磁盘 远程登录服务器后,桌面上只有一个回收站的,我们在桌面空白处右键属性-->桌面--& ...

  6. sublime text如何保存为uft-8无bom编码格式文件

    https://jingyan.baidu.com/article/9158e000388092a2541228b6.html 今天发现自己的文件突然多了很多特殊符号,真是奇了怪,查找html里面也并 ...

  7. es6重点笔记：数值，函数和数组

    本篇全是重点,捡常用的怼,数值的扩展比较少,所以和函数放一起: 一,数值 1,Number.EPSILON:用来检测浮点数的计算,如果误差小于这个,就无误 2,Math.trunc():取整,去除小数 ...

  8. List源码学习之LinkedList

    LinkedList 内部数据接口为一个链表,存储数据可为空可重复. 1.包含主要参数: //集合长度transient int size = 0; /** * 头结点 */ transient No ...

  9. ASP.NET Core Razor页面禁用防伪令牌验证

    在这篇短文中,我将向您介绍如何ASP.NET Core Razor页面中禁用防伪令牌验证. Razor页面是ASP.NET Core 2.0中增加的一个页面控制器框架,用于构建动态的.数据驱动的网站: ...

  10. 多IP服务器应用可以有效的降低成本

    多IP的常规应用很多,SEO,EDM,VPN代理等.可以有效的解决成本,很多时候的租用一台高配置服务器通过XEN,hyper-V等虚拟化技术分割成VPS ,共用一台服务器就会大大的降低成本,这样就需要 ...