<!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. v3学院带你学习EEPROM读写实验

    一.实验背景在消费者电子电讯和工业电子中看上去不相关的设计里经常有很多相似的地方例如几乎每个系统都包括一些智能控制通常是一个单片的微控制器,通用电路例如LCD驱动器远程I/O,RAM,EEPROM或数 ...

  2. 检测Windows程序的内存和资源泄漏之原生语言环境

    最近接连收到大客户的反馈,我们开发的一个软件,姑且称之为App-E吧,在项目规模特别大的情况下,长时间使用会逐渐耗尽内存,运行越来越缓慢,软件最终崩溃.由于App-E是使用混合语言开发的,主界面使用C ...

  3. iOS开发之UIApplication和delegate

    1.概述 所有的移动操作系统都有个致命的缺点:app很容易受到打扰.比如一个来电或者锁屏会导致app进入后台甚至被终止. 还有很多其它类似的情况会导致app受到干扰,在app受到干扰时,会产生一些系统 ...

  4. unity3d屏蔽Windows10输入法

    在win10上,如果安装了某些输入法(比如QQ输入法),会造成unity的键盘事件被输入法捕获而不能触发的情况.只有将输入法切换到英文状态下才能响应键盘事件. 解决办法有, 1:用户主动切换输入法,甚 ...

  5. Android 学习笔记之实时保存数据-现场保护onSaveInstanceState()

    数据保存:在软件开发中我们希望保存下各个Activity数据,以实现客户数据的时时保存,达到较好的用户体验. 那么我们需要解决如下问题: 1.什么时候保存? 2.保存哪些数据?     我想保存应用产 ...

  6. Adroid学习之 从源码角度分析-禁止使用回退按钮方案

    有时候,不能让用户进行回退操作,如何处理? 查看返回键触发了哪些方法.在打开程序后把这个方法禁止了. 问题:程序在后台驻留,这样就会出现,其他时候也不能使用回退按钮.如何处理,在onpase()时方法 ...

  7. Java 基础知识总结 2

    11.Java常用类: StringBuffer StringBuffer 是使用缓冲区的,本身也是操作字符串的,但是与String类不同,String类的内容一旦声明之后则不可以改变,改变的只是其内 ...

  8. Spring Boot 学习笔记--整合Redis

    1.新建Spring Boot项目 添加spring-boot-starter-data-redis依赖 <dependency> <groupId>org.springfra ...

  9. mapTask并行度优化及源码分析

    mapTask并行度的决定机制 一个job的map阶段并行度由客户端在提交job时决定,而客户端对map阶段并行度的规划的基本逻辑为:将待处理数据执行逻辑切片(即按照一个特定切片大小,将待处理数据划分 ...

  10. 傻瓜式使用AutoFac

    定义一个接口: using System; using System.Collections.Generic; using System.Linq; using System.Web; namespa ...