transform复习之图片的旋转木马效果
效果示意图
<!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复习之图片的旋转木马效果的更多相关文章
- 使用iCarousel的旋转木马效果请求图片
使用iCarousel的旋转木马效果请求图片 https://github.com/nicklockwood/iCarousel 先看看效果: 源码如下: // // RootViewControll ...
- 利用CSS3D效果制作简易旋转木马效果
最近看一下css3d的一些特性,想着也实验学习一下,制作个小demo之类的.就练习了一下.开发一个粗糙的选择木马效果,如图 其实就是找到角度和位置,计算每根柱子的旋转角度摆放到3d空间的置顶位置即可. ...
- HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相册
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...
- HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相冊
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...
- Elastislide - 响应式的图片循环展示效果
Elastislide 是一款非常优秀的响应式 jQuery 图片循环展示(旋转木马)插件,集成了 Touchwipe 插件以支持触屏设备.提供了四种效果:水平图片传送带.垂直图片传送带.固定在屏幕底 ...
- jquery.roundabout.js实现3D图片层叠旋转木马切换
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js. 兼容性如图: html结构代码: <div id="featured-area& ...
- HTML5鼠标hover的时候图片放大的效果展示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- css3图片3D翻转效果
点击图片看翻转效果 html结构 <div class="flip"> <div class="front"> <img src= ...
- Android UI - 实现广告Banner旋转木马效果
Android UI - 实现广告Banner旋转木马效果 前言 本篇博客要分享的一个效果是实现广告Banner轮播效果,这个效果也比較常见,一些视频类应用就常常有,就拿360影视大全来举例吧: 用红 ...
随机推荐
- javascript 对象-13
对象 无序属性的集合,属性可以包含基本值.对象或者函数,简单理解为对象是若干属性的集合:我们常说的面向对象(oop)编程其实是指的一种编码的思想,简单理解为用对象来封装数据,利用封装.继承.多态对代码 ...
- JS中使用正则表达式替换对象里的大小写
function parse(obj){ var str = JSON.stringify(obj); var dataObj = str.replace(/Name/g, "name& ...
- [国嵌笔记][011][Linux密码破解]
破解步骤 1.在系统启动时进入grub选项菜单 2.在grub选项菜单中按e进入编辑模式 3.编辑kernel行,添加 /init 1 (表示进入单用户启动模式,在单用户启动模式中不会要求输入密码) ...
- sql for xml 输出结果带单引号出现转成&apos的解决方案
select '''' + ID +''',' from 表 for xml path('') 此SQL语句,输出结果如‘1’,’2‘,’3‘, 但是在因xml会出现path转译的问题将‘转成&am ...
- Screen命令安装使用教程
在安装lnmp之前,我们一般先运行一下Screen程序,因为screen好像一个容器一样,把lnmp的安装过程保护了起来.以CentOS中安装lnmp为例,程序下载.编译都需要比较长的时间,如果中途遇 ...
- 一键批量打印EXCEL、WORD文档
一键批量打印EXCEL.WORD文档,本方法也可以打印同一个文档N份,可以批量打印A3.A4文档,包括单.双面打印等.希望能帮到广大朋友.请大家注重原创版权,不得在未经许可的下转载.传播,或者用来对同 ...
- HTML5 Canvas圆盘抽奖应用（适用于Vue项目）
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- 怎么解决dede首页网址自动加上index.html
怎样去掉dedecms5.7(织梦)首页url后index.html有三种方法 1.去配置你的空间的默认首页地址.把index.html移到默认文本最前面.(确保你的默认文档里面有index.html ...
- tree conflict svn 怎么解决
如果自己和其他人修改了同一个文件,而他已经更新到SVN,你commit时就会出现冲突,如何解决呢? 方法/步骤 使用SVN时,更新一个自己修改的文件到服务器,出现冲突,因为其他同事也修改了这个文件并且 ...
- jquery 循环获取checkBox的值,以及对复选框选中，取消，操作按钮
法一:jquery 循环获取选中checkBox框的值 function checkeds() { $("input:checkbox").each(function(index) ...