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图片变换的更多相关文章

  1. 使用 CSS3 实现 3D 图片滑块效果【附源码下载】

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

  2. 好吧，CSS3 3D transform变换，不过如此！

    一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...

  3. Android 高级UI设计笔记14：Gallery（画廊控件）之 3D图片浏览

    1. 利用Gallery组件实现 3D图片浏览器的功能,如下: 2. 下面是详细的实现过程如下: (1)这里我是测试性代码,我的图片是自己添加到res/drawable/目录下的,如下: 但是开发中不 ...

  4. 好吧，CSS3 3D transform变换，不过如此！——张鑫旭

    一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...

  5. Safari 3D transform变换z-index层级渲染异常的研究

    by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=5569 一.Safari是新时代的IE6 在2年前介绍currentColor变量 ...

  6. 详解如何用 CSS3 完成 3D transform变换

    Tips:阅读提示!!! 首先,本文针对的是3D transform变换的学习,所以你需要对 2D transform变换 有一定的了解 其次,需要说明的是,代码是一种需要自己不断实践的学科,建议各位 ...

  7. 网页特效：用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. 使用 CSS3 动画实现的 3D 图片过渡特效

    这是一个基于 CSS3 动画实现的图片过渡效果,共有 Flip.Rotation.Multi-flip.Cube.Unfold 等6种效果,它们将证明 CSS3 Transform 和 Transit ...

  9. 精致3D图片切换效果，最适合企业产品展示

    这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中.支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效 ...

随机推荐

  1. Linux：一位猫奴的意外产物

    作者:Vamei,严禁任何形式转载. 1991年年中,林纳斯·托瓦兹(Linus Torvalds)在自己房间里敲着键盘.他全神贯注地盯着14寸的黑色屏幕,都没感觉到自己的小猫Randi在扒自己的裤腿 ...

  2. ReentrantLock 以及 AQS 实现原理

    什么是可重入锁?       ReentrantLock是可重入锁,什么是可重入锁呢?可重入锁就是当前持有该锁的线程能够多次获取该锁,无需等待.可重入锁是如何实现的呢?这要从ReentrantLock ...

  3. html 选择器之属性选择器

    属性选择器的主要作用个人的理解就是对带有指定属性的元素设置css样式. 使用css3的属性选择器,可以指定元素的某个属性,也可以指定某个属性和这个属性所对应的值. css3的属性选择器主要包括下面几种 ...

  4. CSAcademy Beta Round #5 Force Graph

    题目链接:https://csacademy.com/contest/arhiva/#task/force_graph/ 大意是有若干个节点,每个节点对应一个二维坐标,节点之间相互有斥力存在.同时有些 ...

  5. ueditor .net设置步骤

    1.官网http://ueditor.baidu.com,下载ueditor的.net版本 2.把下载后的文件夹放在项目content目录下 3.页面设置,Featrue为textArea的id 4. ...

  6. JavaWeb的国际化（17/4/8）

      国际化的缺点: 因为文字不同,所以带来的排版问题一样严重,通常都是重新在写一个网站反而更加清晰,快捷 1:需要从浏览器中获取到浏览器语言(Accept-Language) 2:利用locale获取 ...

  7. Block Token 原理分析

    介绍 文件权限检查由NameNode执行,而不是DataNode执行. 默认情况下,任何客户端都可以访问只有其块ID的任何块. 为了解决这个问题,Hadoop引入了块访问令牌的概念. 块访问令牌由Na ...

  8. bzoj2884 albus就是要第一个出场

    Description 已知一个长度为n的正整数序列A(下标从1开始), 令 S = { x | 1 <= x <= n }, S 的幂集2^S定义为S 所有子集构成的集合.定义映射 f ...

  9. PDO(数据访问抽象层)、pdo事务功能和预处理功能---2017-05-05

    之前所学的数据访问都是用mysqli做成类来访问的,但是mysqli这个类只是针对mysql这个数据库的:那么如果访问其他类型的数据库呢? 那么这就用到了PDO(数据访问抽象层). 一.关于PDO基本 ...

  10. 堆和栈（java内存）

    栈内存: 在函数中定义的一些基本类型的变量和对象的引用变量都是在函数的栈内存中分配.当在一段代码块中定义一个变量时,java就在栈中为这个变量分配内存空间,当超过变量的作用域后,java会自动释放掉为 ...