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 浏览器浏览效 ...
随机推荐
- php最新微信扫码在线支付接口。ecshop和shopex,shopnc下完美无错
最近为客户的一个在线商城做了一个微信扫码在线支付的接口.跟大家分享一下. 1 首先可以模仿其他的接口,比如支付宝,财付通等的接口,构建模块功能文件和语言文件.2 微信提供2种扫码方式,大家可以根据自己 ...
- grid实例（Asp.net）
<link href="../../js/jqGrid/css/ui.jqgrid.css" rel="stylesheet" type="te ...
- ubuntu12.04.5安装openssh-server所引发的血案
刚安装好的ubuntu12.04.5在安装openssh-server之后,安装其他软件都安装不了,如下: root@ubuntu:/home/lancer/software/ssh# apt-get ...
- PHP 魔术方法 __call 与 __callStatic 方法
PHP 魔术方法 __call 与 __callStatic 方法 PHP 5.3 后新增了 __call 与 __callStatic 魔法方法. __call 当要调用的方法不存在或权限不足时,会 ...
- Vuex（一）——vuejs的状态管理模式
一.Vuex是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式. 它采用集中式存储 管理 应用的所有组件 的 状态,并以 相应的规则 保证 状态以一种 可预测的方式 发生变化. ...
- 关于REST的浅显了解
REST 是一种软件架构风格 1.定义 REST即表述性状态传递(Representational State Transfer) 是一组架构约束条件和原则.是设计风格而不是标准. 满足这些约束条件和 ...
- 【从无到有】HTML的初识——part1
Ⅰ.HTML的初识 1.HTML:超文本标签语言(网页源代码) 2.html的基本结构: <html> <head> <meta charset="utf-8& ...
- Hive 的简单使用及调优参考文档
Hive 的简单使用及调优参考文档 HIVE的使用 命令行界面 使用一下命令查看hive的命令行页面, hive --help --service cli 简化命令为hive –h 会输出下面的这 ...
- 一文读懂 HTTP/2 特性
HTTP/2 是 HTTP 协议自 1999 年 HTTP 1.1 发布后的首个更新,主要基于 SPDY 协议.由互联网工程任务组(IETF)的 Hypertext Transfer Protocol ...
- 关于vs code的个人配置
vs code官方下载地址 : https://code.visualstudio.com/Download 下载好的vs code相当是一款纯文本编辑器,接下来开始进行对其配置: 页面设 ...