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 浏览器浏览效 ...
随机推荐
- 基于51单片机IIC通信的PCF8591学习笔记
引言 PCF8591 是单电源,低功耗8 位CMOS 数据采集器件,具有4 个模拟输入.一个输出和一个串行I2C 总线接口.3 个地址引脚A0.A1 和A2 用于编程硬件地址,允许将最多8 个器件连接 ...
- 基于opencv的车牌识别系统
前言 学习了很长一段时间了,需要沉淀下,而最好的办法就是做一个东西来应用学习的东西,同时也是一个学习的过程. 概述 OpenCV的全称是:Open Source Computer Vision ...
- Linux - 进程间通信 - 命名管道
1.命名管道的特点: (1)是管道,可用于非血缘关系的进程间的通信 (2)使用命名管道时,梁金成需要用路径表示通道. (3)命名管道以FIFO的文件形式存储于文件系统中.(FIFO:总是按照先进先出的 ...
- Elasticsearch - 快速入门
Elasticsearch是基于Apache 2.0开源的实时.分布式.分析搜索引擎,相比Lucene,Elasticsearch的上手比较容易,这篇文章主要纪录Elasticsearch的基本概念和 ...
- iOS开发 - 适配Https的野路子
大致写下适配Https时遇到的坑,做完服务器迁移一直通宵到现在,表示无力再多做详解,只放一些常见问题的解决方案吧 问题一.Https请求失败 1. NetManager初始化时可参考如下设置(因为我没 ...
- 谈一下我们是如何开展code review的
众所周知,代码审查是软件开发过程中十分重要的环节,楼主结合自己的实际工作经验,和大家分享一下在实际工作中代码审查是如何开展的, 笔者水平有限,若有错误和纰漏,还请大家指正. 代码审查的阻力 我想不通公 ...
- PTA自测-3 数组元素循环右移问题
自测-3 数组元素循环右移问题 一个数组A中存有N(N>0)个整数,在不允许使用另外数组的前提下,将每个整数循环向右移M(M≥0)个位置,即将A中的数据由(A0A1···AN-1)变换为 ...
- 源于《Unity官方实例教程 “Space Shooter”》思路分析及相应扩展
教程来源于:Unity官方实例教程 Space Shooter(一)-(五) http://www.jianshu.com/p/8cc3a2109d3b 一.经验总结 教程中步骤清晰,并且 ...
- 记录下一个C++初始化的方式（很少有人这么用，但是却是一个使代码更加简洁的方式）
很多时候,在一个类创建的时候给它初始化,一般呢,99%的人都会这么用: //A.h Class CA { int a; char* p; int getValue(); }; //A.cpp CA:: ...
- java.util.prefs.Preferences
java.util.prefs.Preferences Preferences类是在JDK1.4中首次提供的,可以用它来存放应用程序的配置数据,这里对Preferences类做点介绍. 1.Prefe ...