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. Ranking Relevance小结

    Ranking Relevance是搜索排序算法的各个影响因子中相当重要的一个部分.对于Ranking Relevance的计算,过去的技术往往分为两个大的方向:Click Behavior和Text ...

  2. 你的计算机也可以看懂世界——十分钟跑起卷积神经网络（Windows+CPU）

    众所周知,如果你想研究Deep Learning,那么比较常用的配置是Linux+GPU,不过现在很多非计算机专业的同学有时也会想采用Deep Learning方法来完成一些工作,那么Linux+GP ...

  3. Docker aufs存储驱动layer、diff、mnt目录的区别

    Docker基础信息 首先,先查询Docker使用的后端存储.使用命令docker info,主要关注Storage Driver相关的部分. $ docker info ... Server Ver ...

  4. 第十章 MyBatis入门

    第十章   MyBatis入门10.1 MyBatis入门        优点:简单且功能强大.能够完全控制SQL语句.容易维护和修改    缺点:移植性不好    使用步骤:        1.下载 ...

  5. IOS 私有变量 私有属性的书写方法

    一.早期只能定义在.h文件中.用@private 关键字来定义私有变量. @interface ViewController{ @private Bool _isBool; } @end 二.允许在. ...

  6. SQL基础函数

    首先咱们一起来看一下SQL的基本函数 一.聚合函数 二.数学函数 三.字符串函数 四.转换函数 五.时间函数 这样子看起来可能很多,那咱们给变得---------------------------- ...

  7. GitHub上非常受开发者欢迎的iOS开源项目（二）

    "每一次的改变总意味着新的开始."这句话用在iOS上可谓是再合适不过的了.GitHub上的iOS开源项目数不胜数,iOS每一次的改变,总会引发iOS开源项目的演变,从iOS 1.x ...

  8. Hadoop - 操作练习之单机配置 - Hadoop2.8.0/Ubuntu16.04

    系统版本 anliven@Ubuntu1604:~$ uname -a Linux Ubuntu1604 4.8.0-36-generic #36~16.04.1-Ubuntu SMP Sun Feb ...

  9. 【代码学习】GD库中图片缩印

    bool imagecopyresampled ( resource $dst_image, resource $src_image, int $dst_x, int $dst_y, int $src ...

  10. 使用Java POI来选择提取Word文档中的表格信息

    通过使用Java POI来提取Word(1992)文档中的表格信息,其中POI支持不同的ms文档类型,在具体操作中需要注意.本文主要是通过POI来提取微软2003文档中的表格信息,具体code如下(事 ...