<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D picture transfer</title>
<link rel="stylesheet" href="public.css">
</head>
<body>
<div id="wrap">
<div id="stage">
<img src="data:images/1.png" alt="">
<img src="data:images/2.png" alt="">
<img src="data:images/3.png" alt="">
<img src="data:images/4.png" alt="">
</div>
</div>
<script src="public.js"></script>
</body>
</html>
#wrap{
width: 400px;
height: 300px;
position: absolute;
left: 50%;
top:300px;
margin-left: -200px;
perspective:800px;
border:1px solid red;
}
#stage{
width: 300px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;
transform-style:preserve-3d;
transition:all 1s ease-in;
}
img{
width: 300px;
height: 200px;
position: absolute; }
img:nth-child(1){
transform:rotateY(0deg) translateZ(150px);
}
img:nth-child(2){
transform:rotateY(90deg) translateZ(150px);
}
img:nth-child(3){
transform:rotateY(180deg) translateZ(150px);
}
img:nth-child(4){
transform:rotateY(270deg) translateZ(150px);
}
window.onload=function(){
var kk=0;
var aa=document.getElementById("stage");
var timer=setInterval(function(){
kk+=90;
aa.style.transform="rotateY("+kk+"deg)";
},1000)
}

简单的3D图片轮播dome的更多相关文章

  1. 实现一个3D图片轮播插件 —— 更新版

    前言:     前段时间写下了之前那篇 3D图片轮播效果,后来发现了 Pedro Botelho 写的jquery.gallery.js ,于是重新修改了自己的这个图片轮播,使之可以成为一个插件来使用 ...

  2. ViewFlipper的简单使用实现图片轮播效果

    /** * ViewFlipper: * 安卓系统自带的一个多页面管理控件,它可以实现子页面的自动切换 * 为ViewFlipper加入View: * (1)在layout布局文件静态导入子View ...

  3. 最简单的JS图片轮播

    var arr=new Array(); arr[1]="";//放图片地址 arr[2]=""; arr[3]=""; var no=0; ...

  4. 实现一个图片轮播-3d播放效果

    前言:最近在做一个音乐播放器,首页要做一个图片轮播,看了bootstrap的carousel插件以及移动端的swipe.js库,都是平面图片轮播的效果,所以自己想着实现类似网易云app里那种3d图片轮 ...

  5. Android高级图片滚动控件,编写3D版的图片轮播器

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/17482089 大家好,好久不见了,最近由于工作特别繁忙,已经有一个多月的时间没写博 ...

  6. ios图片轮播效果

    代码地址如下:http://www.demodashi.com/demo/11959.html ImageCarousel 简单封装的图片轮播器 内存过大由于我加载的图片分辨率较高(4k) 文件目录 ...

  7. JavaScript图片轮播,举一反三

    图片轮播,在一些购物网站上运用的不胜枚举,下面简单介绍一下图片轮播的实现. 如图 <!doctype html> <html lang="en"> < ...

  8. css3实践之摩天轮式图片轮播+3D正方体+3D标签云(perspective、transform-style、perspective-origin)

    本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(c ...

  9. Swift 使用CollectionView 实现图片轮播封装就是这样简单

    前言: 这篇你可以学会自定义视图,创建collectionView,协议的使用,定时器; 自制图片 先上Demo:Github上封装好的下载即用, 好用请Star Thanks首先新建一个继承于UIV ...

随机推荐

  1. WEB开发性能优化--核心定义介绍篇(1)

    推荐理由 随着 互联网的蓬勃发展,并且伴随着产品功能的越来越复杂,对于技术人员来说最大的挑战就是如何在保证业务快速发展的同时,也可保证不断复杂的业务对用户体验的影响,其中对用户来说最重要的体验指标是如 ...

  2. iOS截取http/https流量

    0x01.Why? 做移动测试的同学经常会在app和server中间架设一个代理(例如charles或者fiddler等),由经代理,app和server之间的交互及交互内容变得可视化,使得我们不再摸 ...

  3. Unity无缝循环世界实现

    一年前曾经碰到过已无限世界为题材的游戏开发比赛,虽然对比赛没有兴趣,但是对这个题材倒是有点想法.如何通过unity3d实现无缝的循环世界呢. 有一种想法是动态生成,一块场景一块场景进行动态加载.(做过 ...

  4. 【C语言】gets()和scanf()函数的区别

    scanf函数与gets函数 scanf函数和gets( )函数都可用于输入字符串,但在功能上有区别.若想从键盘上输入字符串"hi hello",则应该使用gets函数. gets ...

  5. 【SoDiaoEditor更新啦】--谨以献给那些还在医疗行业奋斗的小伙伴们

    先放github地址:https://github.com/tlzzu/SoDiaoEditor.v2 首先,这不是愚人节的玩笑,,, 本想着三月底发布来着,结果昨天又在兼容性上调出几个bug,然后拖 ...

  6. js 操作 cookie

    js 操作 cookie 的方法如下: //设置cookie function setCookie(cname, cvalue, exdays) { var d = new Date(); d.set ...

  7. 【2017-04-01】JS字符串的操作、时间日期的操作、函数、事件、动画基础

    一.字符串的操作 1.转大写: s.toLowerCase(); 2.转大写: s.toUpperCase(); 3.字符串的截取: s.substr(3,4);      -从索引3开始截取,截取4 ...

  8. Luogu2723丑数Humble Numbers【归并排序】

    Luogu2723丑数Humble Numbers 题目背景 对于一给定的素数集合 S = {p1, p2, ..., pK},考虑一个正整数集合,该集合中任一元素的质因数全部属于S.这个正整数集合包 ...

  9. P2物理引擎中文文档

    P2物理引擎中文文档地址:https://github.com/schteppe/p2.js/wiki/Chinese-wiki-%E4%B8%AD%E6%96%87%E7%BB%B4%E5%9F%B ...

  10. 手机自动化测试:appium源码分析之bootstrap四

    手机自动化测试:appium源码分析之bootstrap四   Orientation是调整屏幕方向的操作 package io.appium.android.bootstrap.handler; i ...