<!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. iOS开发之Block

    1.定义 (1) Block是OC中的一种数据类型,在iOS开发中被广泛使用 (2) ^是Block的特有标记 (3) Block的实现代码包含在{}之间 (4) 大多情况下,以内联inline函数的 ...

  2. 细心！SQL语句进行运算时使用字符串时缺失精度的细节！

    昨天没有更新,特此来说明下原因,昨天回到家时已经甚晚,正逢公司这几天项目比较紧张(bug多,赶需求,看着bug单齐刷刷的转过来,心都颤抖了一下),没有及时准备素材,今天又加了一天班(现在还在公司,偷个 ...

  3. MySQL 查询重复的数据，以及部分字段去重和完全去重

    1.查找表中多余的重复记录(多个字段) select * from vitae a where (a.peopleId,a.seq) in  (select peopleId,seq from vit ...

  4. webSocket学习与应用

    非原创,版权归原作者所有http://www.cnblogs.com/shizhouyu/p/4975409.html 1.什么是WebSocket WebSocket 是一种自然的全双工.双向.单套 ...

  5. unity传送门类似效果实现

    简述 在传送门中,核心的玩法是在地上或者墙上打开2个可以联通的洞来实现传送的效果.以此扩展加入解谜要素构成游戏的核心. 这里尝试使用unity来实现传送门的核心功能,具体功能分析如下: 1.传送门的模 ...

  6. Vue.use自定义自己的全局组件

    通常我们在vue里面使用别人开发的组件,第一步就是install,第二步在main.js里面引入,第三步Vue.use这个组件.今天我简单的也来use一个自己的组件. 这里我用的webpack-sim ...

  7. 给自己的 MAC 添加一个桌面日历

    使用 Ubuntu 做自己的办公环境用了将近三年,最近换了新款的 MBP,系统都用的很舒服. 不过 Ubuntu 是在我的 TP W540上部署的,而 W540 + 电源适配太重了(我的电池是9芯的) ...

  8. RabbitMQ入门教程

    1.下载安装RabbitMQ windows下 先 下载Erlang 64位 其它去这里下载 http://www.erlang.org/downloads 然后 下载RabbitMQ  官网 htt ...

  9. 2.熟悉Java基本类库系列——Java IO 类库

    Java中常用的IO操作基本上可以分为四大部分,分别是:File类操作.RandomAccessFile类操作.字节流操作.字符流操作.只要熟练掌握了本文中所列举的所有例子,基本上对于Java的IO流 ...

  10. Redis数据类型之字符串String

    String类型是Redis中最基本也最简单的一种数据类型 首先演示一些常用的命令 一.SET key value 和GET key SET key value 和 GET key  设置键值和获取值 ...