简单的3D图片轮播dome
<!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的更多相关文章
- 实现一个3D图片轮播插件 —— 更新版
前言: 前段时间写下了之前那篇 3D图片轮播效果,后来发现了 Pedro Botelho 写的jquery.gallery.js ,于是重新修改了自己的这个图片轮播,使之可以成为一个插件来使用 ...
- ViewFlipper的简单使用实现图片轮播效果
/** * ViewFlipper: * 安卓系统自带的一个多页面管理控件,它可以实现子页面的自动切换 * 为ViewFlipper加入View: * (1)在layout布局文件静态导入子View ...
- 最简单的JS图片轮播
var arr=new Array(); arr[1]="";//放图片地址 arr[2]=""; arr[3]=""; var no=0; ...
- 实现一个图片轮播-3d播放效果
前言:最近在做一个音乐播放器,首页要做一个图片轮播,看了bootstrap的carousel插件以及移动端的swipe.js库,都是平面图片轮播的效果,所以自己想着实现类似网易云app里那种3d图片轮 ...
- Android高级图片滚动控件,编写3D版的图片轮播器
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/17482089 大家好,好久不见了,最近由于工作特别繁忙,已经有一个多月的时间没写博 ...
- ios图片轮播效果
代码地址如下:http://www.demodashi.com/demo/11959.html ImageCarousel 简单封装的图片轮播器 内存过大由于我加载的图片分辨率较高(4k) 文件目录 ...
- JavaScript图片轮播,举一反三
图片轮播,在一些购物网站上运用的不胜枚举,下面简单介绍一下图片轮播的实现. 如图 <!doctype html> <html lang="en"> < ...
- css3实践之摩天轮式图片轮播+3D正方体+3D标签云(perspective、transform-style、perspective-origin)
本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(c ...
- Swift 使用CollectionView 实现图片轮播封装就是这样简单
前言: 这篇你可以学会自定义视图,创建collectionView,协议的使用,定时器; 自制图片 先上Demo:Github上封装好的下载即用, 好用请Star Thanks首先新建一个继承于UIV ...
随机推荐
- WEB开发性能优化--核心定义介绍篇(1)
推荐理由 随着 互联网的蓬勃发展,并且伴随着产品功能的越来越复杂,对于技术人员来说最大的挑战就是如何在保证业务快速发展的同时,也可保证不断复杂的业务对用户体验的影响,其中对用户来说最重要的体验指标是如 ...
- iOS截取http/https流量
0x01.Why? 做移动测试的同学经常会在app和server中间架设一个代理(例如charles或者fiddler等),由经代理,app和server之间的交互及交互内容变得可视化,使得我们不再摸 ...
- Unity无缝循环世界实现
一年前曾经碰到过已无限世界为题材的游戏开发比赛,虽然对比赛没有兴趣,但是对这个题材倒是有点想法.如何通过unity3d实现无缝的循环世界呢. 有一种想法是动态生成,一块场景一块场景进行动态加载.(做过 ...
- 【C语言】gets()和scanf()函数的区别
scanf函数与gets函数 scanf函数和gets( )函数都可用于输入字符串,但在功能上有区别.若想从键盘上输入字符串"hi hello",则应该使用gets函数. gets ...
- 【SoDiaoEditor更新啦】--谨以献给那些还在医疗行业奋斗的小伙伴们
先放github地址:https://github.com/tlzzu/SoDiaoEditor.v2 首先,这不是愚人节的玩笑,,, 本想着三月底发布来着,结果昨天又在兼容性上调出几个bug,然后拖 ...
- js 操作 cookie
js 操作 cookie 的方法如下: //设置cookie function setCookie(cname, cvalue, exdays) { var d = new Date(); d.set ...
- 【2017-04-01】JS字符串的操作、时间日期的操作、函数、事件、动画基础
一.字符串的操作 1.转大写: s.toLowerCase(); 2.转大写: s.toUpperCase(); 3.字符串的截取: s.substr(3,4); -从索引3开始截取,截取4 ...
- Luogu2723丑数Humble Numbers【归并排序】
Luogu2723丑数Humble Numbers 题目背景 对于一给定的素数集合 S = {p1, p2, ..., pK},考虑一个正整数集合,该集合中任一元素的质因数全部属于S.这个正整数集合包 ...
- P2物理引擎中文文档
P2物理引擎中文文档地址:https://github.com/schteppe/p2.js/wiki/Chinese-wiki-%E4%B8%AD%E6%96%87%E7%BB%B4%E5%9F%B ...
- 手机自动化测试:appium源码分析之bootstrap四
手机自动化测试:appium源码分析之bootstrap四 Orientation是调整屏幕方向的操作 package io.appium.android.bootstrap.handler; i ...