3D图片变换
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
/* 设置样式*/
7 img {
8 vertical-align: top;
9 }
10 .wrap {
11 margin: 50px auto;
12 width: 520px;
13 height: 280px;
14 border: 2px solid #000;
15 position: relative;
/*给父盒子设置景深*/
16 perspective: 800px;
17 }
18 #list {
19 margin: 0;
20 padding: 0;
21 list-style: none;
22 width: 520px;
23 height: 280px;
/*设置变换样式为3D模式*/
24 transform-style: preserve-3d;
25 transform: translateZ(-260px) rotateY(0deg);
26 transition: 1s;
27 }
28 #list li {
29 position: absolute;
30 left: 0;
31 top: 0;
32 }
/*依次设置角度*/
33 #list li:nth-of-type(1) {
34 transform: rotateY(0deg) translateZ(260px);
35 }
36 #list li:nth-of-type(2) {
37 transform: rotateY(90deg) translateZ(260px);
38 }
39 #list li:nth-of-type(3) {
40 transform: rotateY(180deg) translateZ(260px);
41 }
42 #list li:nth-of-type(4) {
43 transform: rotateY(270deg) translateZ(260px);
44 }
45 input {
46 position: absolute;
47 top: 120px;
48 width: 40px;
49 height: 40px;
50 border: 1px solid #ccc;
51 }
52 input:nth-of-type(1) {
53 left: -100px;
54 }
55 input:nth-of-type(2) {
56 right: -100px;
57 }
58 </style>
59 </head>
60 <body>
61 <div class="wrap">
62 <ul id="list" style="transform: translateZ(-260px) rotateY(0deg);">
63 <li>
64 <!-- <a href="#"> -->
65 <img src="../img/TB1b_TiQVXXXXcgXpXXSutbFXXX.jpg">
66 <!-- </a> -->
67 </li>
68 <li>
69 <!-- <a href="#"> -->
70 <img src="../img/TB1dfhhQVXXXXbJaXXXXXXXXXXX-520-280.jpg_q90_.webp">
71 <!-- </a> -->
72 </li>
73 <li>
74 <!-- <a href="#"> -->
75 <img src="../img/TB1mobOQVXXXXX_XVXXSutbFXXX.jpg">
76 <!-- </a> -->
77 </li>
78 <li>
79 <!-- <a href="#"> -->
80 <img src="../img/TB1MrrzQVXXXXXIapXXSutbFXXX.jpg">
81 <!-- </a> -->
82 </li>
83 </ul>
84 <input type="button" value="prev" id="prev">
85 <input type="button" value="next" id="next">
86 </div>
87 <script type="text/javascript">
88 var prev = document.getElementById('prev');
89 var next = document.getElementById('next');
90 var n1=0;
92 prev.onclick=function() {
//每点击一次旋转90度
93 n1+=90;
94 list.style.transform="translateZ(-260px) rotateY("+n1+"deg)";
95
96 }
97 next.onclick=function() {
//每点击一次旋转90度
99 n1-=90;
100 list.style.transform="translateZ(-260px) rotateY("+n1+"deg)";
101
102 }
103 </script>
104 </body>
105 </html>
3D图片变换的更多相关文章
- 使用 CSS3 实现 3D 图片滑块效果【附源码下载】
使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...
- 好吧，CSS3 3D transform变换，不过如此！
一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...
- Android 高级UI设计笔记14：Gallery（画廊控件）之 3D图片浏览
1. 利用Gallery组件实现 3D图片浏览器的功能,如下: 2. 下面是详细的实现过程如下: (1)这里我是测试性代码,我的图片是自己添加到res/drawable/目录下的,如下: 但是开发中不 ...
- 好吧，CSS3 3D transform变换，不过如此！——张鑫旭
一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...
- Safari 3D transform变换z-index层级渲染异常的研究
by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=5569 一.Safari是新时代的IE6 在2年前介绍currentColor变量 ...
- 详解如何用 CSS3 完成 3D transform变换
Tips:阅读提示!!! 首先,本文针对的是3D transform变换的学习,所以你需要对 2D transform变换 有一定的了解 其次,需要说明的是,代码是一种需要自己不断实践的学科,建议各位 ...
- 网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 使用 CSS3 动画实现的 3D 图片过渡特效
这是一个基于 CSS3 动画实现的图片过渡效果,共有 Flip.Rotation.Multi-flip.Cube.Unfold 等6种效果,它们将证明 CSS3 Transform 和 Transit ...
- 精致3D图片切换效果，最适合企业产品展示
这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中.支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效 ...
随机推荐
- 利刃 MVVMLight 6：命令基础
在MVVM Light框架中,事件是WPF应用程序中UI与后台代码进行交互的最主要方式,与传统方式不同,mvvm中主要通过绑定到命令来进行事件的处理, 因此要了解mvvm中处理事件的方式,就必须先熟悉 ...
- Linux下deb包安装工具（附带安装搜狗输入法）
环境是在ubuntu14下的 #1.gdebi安装 使用deb安装工具gdebi,这个工具能解决所有依赖问题 sudo apt-get install gdebi #2.搜狗输入法 deb包下载地址: ...
- Arduino LiquidCrystal Library Bug Report #174181
Arduino LiquidCrystal Character LCD Driver Library BUG Report #174181 by Conmajia Effected Devices H ...
- jdk动态代理与cglib代理、spring aop代理实现原理解析
原创声明:本博客来源为本人原创作品,绝非他处摘取,转摘请联系博主 代理(proxy)的定义:为某对象提供代理服务,拥有操作代理对象的功能,在某些情况下,当客户不想或者不能直接引用另一个对象,而代理对象 ...
- 对java面向对象的初识
我其实一直想写点东西练练自己文笔,今天写下这篇技术类型的文章也没有一个好的格式和章法,但万事开头难,那么就从面向对象开始. 我们大部分人都知道互联网软件的存在,时刻影响了我们的现实生活,那么面向对象的 ...
- html、css、js实现简易计算器
学习HTML,CSS,JS一个月后,想着能自己是否能写出一个简单的东西,故编写了简易的计算器,之前也写过一个坦克大战,坦克大战的有些基本功能没有实现, 故也没有记录下来,想来,对这行初来咋到的,还是需 ...
- PMBOK 学习与实践分享视频
本系列为自己在学习PMBOK时进行的总结与分享,每一节主要包括两部分: 对PMBOK本身的一个结构笔记和讲解. 对自己项目管理工作的一个总结和思考. PMBOK 学习与实践分享视频内容清单 人力资源管 ...
- DirectFB学习笔记三
本篇目的,通过键盘的esc键控制程序退出.学习输入设备产生事件,接收事件,产生反应. 首先获取输入设备 IDirectFBInputDevice *keyboard = NULL; dfb->G ...
- FrameBuffer系列 之 介绍
1. 来由 FrameBuffer是出现在2.2.xx内核当中的一种驱动程序接口.Linux工作在保护模式下,所以用户态进程是无法象 DOS 那样使用显卡 BIOS里提供的中断调用来实现直接写 ...
- xmlplus 组件设计系列之九 - 树（Tree）
树形组件是一种具有层级结构的组件,广泛应用于各种场景.本章会实现一个简单的树形组件,尽管功能有限,但你可以通过扩展它来实现自己所需要的树形组件. 数据源 树形组件的数据源可以是 JSON 格式的数据对 ...