<!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. Visual Studio 2017 新特性

    全新的安装体检 VS2017更好的支持了按需安装的特点,用户可以仅选择需要的功能安装,节省了不少的Disk 最小的安装仅有几百兆,但也支持20多种编程语言的编辑和源码管理 支持创建自定义的离线安装包 ...

  2. Map集合概述和特点

    A:Map集合概述和特点(Set底层依赖的是Map) 将键映射到值的对象 一个映射不能包含重复的键 每个键最多只能映射到一个值 B:Map接口和Collection接口的不同 Map是双列的(是双列集 ...

  3. 集合框架(HashSet存储自定义对象保证元素唯一性)

    HashSet如何保证元素唯一性的原理 1.HashSet原理 a. 我们使用Set集合都是需要去掉重复元素的, 如果在存储的时候逐个equals()比较, 效率较低,哈希算法提高了去重复的效率, 降 ...

  4. React文档翻译系列（三）JSX简介

    # React文档翻译系列(三)JSX简介 先来看一下下面的变量声明: ``` const element = Hello world! ``` 这种有趣的标签语法既不是字符串也不是HTML. 这种形 ...

  5. java 接口默认修饰符问题

    package test; public interface InterfaceTest { void todo();} /** * 以下是反编译的内容,接口里的方法默认都是public的.abstr ...

  6. 20155304 2016-2017-2 《Java程序设计》第六周学习总结

    20155304 2016-2017-2 <Java程序设计>第六周学习总结 教材学习内容总结 第十章 串流设计的概念 无论来源和目的地实体形式是什么,只要取得InputStream和Ou ...

  7. js实现文本框溢出文字用省略号（...）表示

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 通过php动态传数据到highcharts

    1:在平时工作中,在对数据进行展示的时候,是直接通过后台提供的接口来获取json串,用来展示.今天别人问怎么在本地演示一下请求的动态数据. 2:在本地搭建环境,我用的WampServer,下载地址:h ...

  9. Linux之环境变量

    1. 变量的显示与设置 显示变量 echo \(PATH</font></code><br/> 取消变量 <code><font color=&q ...

  10. 如何高效实现扫描局域网IP、主机名、MAC和端口

    近几年工作经常使用RFID识读器,智能家居网关,温湿度传感器.串口服务器.视频编码器等,一般是有串口和网口,由于现场原因一般较少使用串口,大多使用网口.连接方法是IP地址和端口,有的设备带搜索软件,有 ...