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. 【Scala】Scala之Traits

    一.前言 前面学习了Scala中包和导入的相关知识点,接着学习Traits(特质) 二.Traits Scala的特质与Java的接口基本相同,当遇到可以使用Java接口的情形,就可以考虑使用特质,S ...

  2. 使用nodejs进行WEB开发

    这里,准备从零开始用nodejs实现一个微博系统.功能包括路由控制.页面模板.数据库访问.用户注册.登录.用户会话等内容. 将会介绍Express框架.MVC设计模式.ejs模板引擎以及MongoDB ...

  3. css3 兼容各个浏览器

    transform:rotate(9deg);-ms-transform:rotate(9deg); /* Internet Explorer */-moz-transform:rotate(9deg ...

  4. java线程控制安全

    synchronized() 在线程运行的时候,有时会出现线程安全问题例如:买票程序,有可能会出现不同窗口买同一张编号的票 运行如下代码: public class runable implement ...

  5. 架构设计之Spring-Session分布式集群会话管理

    前言 通常在web开发中,回话管理是很重要的一部分,用于存储与用户相关的一些数据.对于JAVA开发者来说,项目中的session一般由Tomcat或者jetty容器来管理. 特点介绍 尽管使用特定的容 ...

  6. AOJ/初等排序习题集

    ALDS1_1_D-MaximumProfit. Codes: //#define LOCAL #include <cstdio> #include <algorithm> u ...

  7. CentOS 7安装Docker

    在虚拟机CentOS 7上安装Docker   ## 零:检查前提条件:   在Red Hat 和Red Hat系列的Linux发行版中,安装Docker所需的前提提交并不多.     ### 1.内 ...

  8. Android触摸事件的应用

    前言 上一篇讲了Android触摸事件的传递机制,具体可以看这里 初识Android触摸事件传递机制.既然知道Android中触摸事件的传递分发,那么它能解决什么样的问题,在我们实际开发中如何应用,这 ...

  9. Kafka官方文档

    Apache Kafka是 一个分布式消息发布订阅系统.它最初由LinkedIn公司基于独特的设计实现为一个分布式的提交日志系统( a distributed commit log),,之后成为Apa ...

  10. USACO section 1.1 C++题解

    USACO section1.1:DONE 2017.03.03 TEXT Submitting Solutions DONE 2017.03.04 PROB Your Ride Is Here [A ...