<!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. QQ登陆接口

    这次做了一个QQ登陆接口---简单记录一下 遇到一大坑-----QQ互联里面添加应用的时候,是网站应用,配置回调地址一定要配置  准确,到指定回调页面 否则会出现问题的.

  2. 机器学习：Python中如何使用最小二乘法

    之所以说"使用"而不是"实现",是因为python的相关类库已经帮我们实现了具体算法,而我们只要学会使用就可以了.随着对技术的逐渐掌握及积累,当类库中的算法已经 ...

  3. PHP GD库生成图片自动换行函数，自动分页函数

    /* 文字自动换行     * @param $card 画板     * @param $pos 数组,top距离画板顶端的距离,fontsize文字的大小,width宽度,left距离左边的距离, ...

  4. shell是什么,各种shell的初步认识,适用于初学者

    shell是什么?有什么用处?怎么用?我相信,这是大部分人刚接触到shell都有过的疑问.下面小编为大家讲解一下自己的讲解,希望能对大家有所帮助. 什么是shell? shell就是系统内核的一层壳, ...

  5. linux下的权限控制

    终于还是要弄服务器了,这是多年前用fedora的时候整理的,也贴出来,顺便也再复习一下. 先来了解一下文件属性,在shell环境里输入:ls -l 可以查看当前目录文件.如:drwxr-xr-x. 1 ...

  6. 老李推荐：第5章3节《MonkeyRunner源码剖析》Monkey原理分析-启动运行: 启动脚本

    老李推荐:第5章3节<MonkeyRunner源码剖析>Monkey原理分析-启动运行: 启动脚本   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性 ...

  7. Java ---自定义标签

         本篇文章介绍自定义标签,可能在工作中很少涉及到自己来定义一个标签库,因为我们基本上都是使用的大神写的标签库,基本上直接使用即可,但是从自身的发展来看,通往高级程序员的道路上,开发框架就需要大 ...

  8. node.js的路由

    app.js: app.use('/', routes);app.use('/reg', routes);app.use('/u/:user',routes);app.use('/post',rout ...

  9. SpringMVC基础学习(一)—初识SpringMVC

    一.HelloWorld 1.导入SpringMVC所需的jar包        2.配置web.xml      配置DispatcherServlet.DispatcherServlet默认加载/ ...

  10. Android使用本地广播

    Android本地广播学习中一直被忽略,今天用到了,Mark一下 1.本地广播的定义和普通广播一样 例如 public class WakeTimesBroadcastReceiver extends ...