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. position relative

    position的默认值是static,(也就是说对于任意一个元素,如果没有定义它的position属性,那么它的position:static) 如果你想让这个#demo里的一个div#sub相对于 ...

  2. 凭证（Credential）

    在SQL Server中,凭证(Credential)用于把Windows用户的身份验证信息(在Windows环境下,是Windows 用户名和密码)存储在SQL Server实例中,并把该身份验证信 ...

  3. NodeJS+express+mogondb学习笔记01

    0.准备工作  安装nodejs环境  官网地址:https://nodejs.org/en/  下载好了 直接一路安装 也没有什么可以说的 不得不说nodejs对于新手上手还是很友好的,再加上现在n ...

  4. 手机应用PC端演示工具介绍

    写给公司内部用的,所以没什么含量,请免炮轰. 为什么需要在PC端演示? 在Android及IOS系统上开发的手机应用,往往由于设备的限制,无法在演示汇报的场合向在场的众人展示界面,如果有工具可以将手机 ...

  5. StringHelper--封转自己的字符串工具类

    我们每次开发项目,都会有很多的关于字符串的处理,字符串的处理太常见了,无法避免,那么这时如果可以把常用的字符串处理封装成类,在以后的开发中应该会减少一些工作量,下面代码对一些常用的字符串处理进行了封装 ...

  6. 局域网内补丁更新80072EE2错误

    在公网中,80072ee2通常是在进行自动更新时遇到的连接性错误.通常由于三防杀毒软件或者浏览器,代理服务器设置不正确而导致的.那么如果是在局域网中遇到该问题,该如何解决呢? 错误截图: 1.首先确认 ...

  7. [Git]06 如何提交空目录

     git和 svn不同,仅仅跟踪文件的变动,不跟踪目录.所以,一个空目录,如果里面没有文件,即便 git add 这个目录,另外在别处 check out 的时候,是没有这个空目录的. 只跟踪文件 ...

  8. 32位机器的LowMemory

        今天在和供应商交流的过程中,被严重鄙视了,竟然认为我连"LowMemory"都没有听说过.感觉很郁闷,好歹我也搞过一段时间memory Management,怎么可能连Lo ...

  9. 关于 vue.js 运行环境的搭建（mac）

    由于本人使用的是mac系统,因此在vue.js 的环境搭建上遇到许许多多的坑.感谢 showonne.yubang 技术指导,最终成功解决.下面是个人的搭建过程,权当是做个笔记吧. 由于mac非常人性 ...

  10. VS2015如何新建C++或者C语言版的lib文件

    当我们不想公开我们的代码的时候,可以把我们的代码封装成静态数据连接库,即lib文件.下面介绍下如何生成lib文件. 以VS2015为例,一种是C++版的lib文件,一种是C语言版的lib文件. 一.按 ...