效果示意图

<!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. 用gcc编译c语言程序以及其编译过程

    对于初学c语言编程的我们来说,学会如何使用gcc编译器工具,对理解c语言的执行过程,加深对c语言的理解很重要!!! 1.预编译 --> 2.编译 --> 3.汇编 --> 4.链接- ...

  2. 安装Ruby、Sass与Compass

    sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby.(注:mac下自带Ruby无需在安装Ruby!) window下安装SASS首先需要安装Ruby,先从官网下载Ruby并安装.安装 ...

  3. IDC服务器的六大基础知识

    无论企业或个人来说,一个是否适合自己的IDC运营商对于业务发展是至关重要的.然而很多用户对IDC行业一知半解,不太了解服务器的种类,更不知道选择什么样的服务器更适合自己了.今天编辑汇总了一些IDC所需 ...

  4. vue-cli脚手架的.babelrc文件 详解

    { // 此项指明,转码的规则 "presets": [ // env项是借助插件babel-preset-env,下面这个配置说的是babel对es6,es7,es8进行转码,并 ...

  5. LAMP与LNMP架构的区别及其具体的选择说明

    LAMP==Linux+Apache+Mysql+PHP LNMP==Linux+Nginx+Mysql+PHP 以上两只架构是目前网站的主流架构 LAMP和LNMP最主要的区别在于: 一个使用的是A ...

  6. Linux中ctrl+z 、ctrl+c、 ctrl+d区别

    ctrl+c,ctrl+d,ctrl+z在linux程序中意义和区别 ctrl+c和ctrl+z都是中断命令,但是他们的作用却不一样.   ctrl+c是强制中断程序的执行,,进程已经终止.   ct ...

  7. kafka和strom集群的环境安装

    前言 storm和kafka集群安装是没有必然联系的,我将这两个写在一起,是因为他们都是由zookeeper进行管理的,也都依赖于JDK的环境,为了不重复再写一遍配置,所以我将这两个写在一起.若只需一 ...

  8. windows安装xampp时出现，unable to realloc xxxxxxxx bytes

    摘录自:http://blog.csdn.net/lz610756247/article/details/70842166 Windows虚拟内存的设置 问题描述:由于开启虚拟内存会导致硬盘IO性能下 ...

  9. Selenium自动化测试脚本中三种等待时间简介

    为了提高脚本的稳定性,我们需要在脚本中增加等待时间 第一种:强制等待 Thread.sleep():固定休眠时间设置,Java的Thread类里提供了休眠方法sleep,导入包后就能使用 sleep( ...

  10. Linux普通用户修改owner非本人文件为什么成功

    关键字:错误提示:E45 已设定选项’readonly’(请加!强制执行) Linux对文件和目录有很好的权限管理,但今天遇到一个比较诡异的事情,普通用户对文件权限不可写,但可以强制保存该文件,这样就 ...