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 浏览器浏览效 ...
随机推荐
- html 选择器之基础选择器
我把CSS选择器分开成三部分,第一部分是我们常用的部分,我把他叫做基本选择器:第二部分我把他称作是属性选择器,第三部分我把他称作伪类选择器 一.基础选择器 1. 通配符(*):选中所有的元素 2.元素 ...
- margin外边距合并问题以及解决方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS清除float浮动
一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在 ...
- Android启动篇 — init原理（一）
======================================================== ================================== ...
- POJ 3294 出现在至少K个字符串中的子串
在掌握POJ 2774(两个串求最长公共子串)以及对Height数组分组后,本题还是容易想出思路的. 首先用字符集外的不同字符连接所有串,这是为了防止两个后缀在比较时超过某个字符串的分界.二分子串的长 ...
- python库安装（numpy+scipy+matplotlib+scikit_learn）
python安装好后,库安装走了很多弯路,查了很多资料,终于安装成功,并且保存了该文章的地址,分享给大家 本人电脑windows 7,64位系统,安装的Python是3.5的,因此下载的库也是对应版本 ...
- 云计算之路-阿里云上：负载均衡错误修改Cookie造成用户无法登录
最近陆续有用户反馈在我们网站上登录时遇到登录死循环问题.输入用户名与密码提交后,显示登录成功,但跳转到目标网址后(由于依然处于未登录状态)又跳转回登录页面,再次登录,再次这样...就这样一直循环,怎么 ...
- 手把手教你学SVN
注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/6822713.html ) 作者:wangwen896 整理 对于很多新手来说,SVN 代码托管一无所 ...
- 解决mysql 服务无法启动问题：Can't find messagefile 'D:\ ools\mysql-5.6.25-winx64\share\errmsg.sys'
右击我的电脑-->管理,查看Window日志里的应用程序,发现报错. 仔细检查一下my.ini的配置,确保路径正确,楼主的目录如下: 关键的一步,查看my.default文件,加入这样一句:sq ...
- Guvav:Options使用和避免NULL
JAVA中的null null是Java中一个很重要的概念.null设计初衷是为了表示一些不确定的东西.null是Java中的关键字,它是大小写敏感的,你不能将null写成Null或NULL,编译器将 ...