参考链接：好吧，CSS3 3D transform变换，不过如此！

  1. transform-style：preserve-3d属性要在图片所在的容器（父元素）中定义，perspective定义在父子元素上的效果不同。
  2. 对象的Z轴与其平面垂直，因此照片需要先旋转，再位移；否则所有照片都会挤到一起。
  3. 点击图片后，都要基于图片的原始顺序和位置进行transform计算。下面是旋转木马的javascript代码、HTML代码和CSS代码。
<script type="text/javascript">

    var count = 1;

    function rotateRound(){ //不管第几次点击，myCircle取出来的Img列表都是HTML中的原始顺序

        var myCircle = document.getElementById("circle").getElementsByTagName("img");

        var i;

        var myImg;

        for(i=0;i<myCircle.length;i++){

              myImg = myCircle[i];

              myImg.style.transform = "rotateY("+(i-count)*40+"deg) translateZ(300px)";  //每次transform都是基于原始位置，而不是当前视图显示的位置。

        }

        count++;

    };

</script>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>旋转木马</title>

<link rel="stylesheet" href="MerryGoRound.css" />

<script type="text/javascript">

    var count = 1;

    function rotateRound(){

        var myCircle = document.getElementById("circle").getElementsByTagName("img");

        var i;

        var myImg;

        for(i=0;i<myCircle.length;i++){

              myImg = myCircle[i];

              myImg.style.transform = "rotateY("+(i-count)*40+"deg) translateZ(300px)";

        }

        count++;

    };

</script>

</head>

<body>

    <section id="stage"><center>

    <div id="circle" onclick="rotateRound()">

        <img class="girls one" src="01.jpg" alt="Taboo" />

        <img class="girls two" src="02.jpg" alt="Taboo" />

        <img class="girls three" src="03.jpg" alt="Taboo" />

        <img class="girls four" src="04.jpg" alt="Taboo" />

        <img class="girls five" src="05.jpg" alt="Taboo" />

        <img class="girls six" src="06.jpg" alt="Taboo" />

        <img class="girls seven" src="07.jpg" alt="Taboo" />

        <img class="girls eight" src="08.jpg" alt="Taboo" />

        <img class="girls nine" src="09.jpg" alt="Taboo" />

    </div>

    </center></section>

</body>
/******************************CSS代码**********************************************/
#stage {

    width:auto;

    margin:50px 50px;

}

#circle {

    perspective:1200px;

    -moz-transform-style:preserve-3d;

}

.girls {

    width:200px;

    height:300px;

    position:absolute;

    -moz-transition:all 0.3s linear;

}

.one {

    -moz-transform:rotateY(0deg) translateZ(300px); 照片绕城柱形，像旋转木马一样

}

.two {

    -moz-transform:rotateY(40deg) translateZ(300px);

}

.three {

    -moz-transform:rotateY(80deg) translateZ(300px);

}

.four {

    -moz-transform:rotateY(120deg) translateZ(300px);

}

.five {

    -moz-transform:rotateY(160deg) translateZ(300px);

}

.six {

    -moz-transform:rotateY(200deg) translateZ(300px);

}

.seven {

    -moz-transform:rotateY(240deg) translateZ(300px);

}

.eight {

    -moz-transform:rotateY(280deg) translateZ(300px);

}

.nine {

    -moz-transform:rotateY(320deg) translateZ(300px);

}

CSS3学习笔记--transform基于原始数据（旋转木马实例）的更多相关文章

  1. CSS3学习笔记--transform中的Matrix(矩阵)

    transform: matrix(a,b,c,d,e,f) ,如下图矩阵所示,任意点(x,y,1)经过matrix变化为(ax+cy+e,bx+dy+f,1),由此可以知道,matrix参数与tra ...

  2. python3.4学习笔记(十四) 网络爬虫实例代码，抓取新浪爱彩双色球开奖数据实例

    python3.4学习笔记(十四) 网络爬虫实例代码,抓取新浪爱彩双色球开奖数据实例 新浪爱彩双色球开奖数据URL:http://zst.aicai.com/ssq/openInfo/ 最终输出结果格 ...

  3. OGG学习笔记02-单向复制配置实例

    OGG学习笔记02-单向复制配置实例 实验环境: 源端:192.168.1.30,Oracle 10.2.0.5 单实例 目标端:192.168.1.31,Oracle 10.2.0.5 单实例 1. ...

  4. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  5. python3.4学习笔记(十一) 列表、数组实例

    python3.4学习笔记(十一) 列表.数组实例 #python列表,数组类型要相同,python不需要指定数据类型,可以把各种类型打包进去#python列表可以包含整数,浮点数,字符串,对象#创建 ...

  6. 十天精通CSS3学习笔记 part3

    第8章 CSS3中的变形与动画(上) 变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度. ...

  7. CSS3学习笔记之linear-gradient

    我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...

  8. HMM模型学习笔记（前向算法实例）

    HMM算法想必大家已经听说了好多次了,完全看公式一头雾水.但是HMM的基本理论其实很简单.因为HMM是马尔科夫链中的一种,只是它的状态不能直接被观察到,但是可以通过观察向量间接的反映出来,即每一个观察 ...

  9. Linux简易APR内存池学习笔记(带源码和实例)

    先给个内存池的实现代码,里面带有个应用小例子和画的流程图,方便了解运行原理,代码 GCC 编译可用.可以自己上网下APR源码,参考代码下载链接: http://pan.baidu.com/s/1hq6 ...

随机推荐

  1. Windows 8.1 应用再出发 - 几种常用控件

    本篇为大家简单介绍Windows 商店应用中控件的用法,为方便讲解,我们在文本控件和按钮控件这两类中分别挑选有代表性的控件进行详细说明. 1. 文本控件 (1) TextBlock TextBlock ...

  2. Titanium系列－－Titanium的简介、Titanium Studio安装和配置(一)

    1. 是什么?--是一个可以通过javascript,html,css等web技术开发移动App的的开发框架,媲美原生App体验和性能,目前支持IOS和Android平台. 2. 为什么能做这个? - ...

  3. NSString几个函数

    第一.判断是否包含前缀于后缀 NSString *str=@"hello andy yang"; if([str hasPrefix:@"hello"]) { ...

  4. URAL - 1917 Titan Ruins: Deadly Accuracy(水题)

    水题一个,代码挫了一下: 题意不好理解. 你去一个洞窟内探险,洞窟内有许多宝石,但都有魔法守护,你需要用魔法将它们打下来. 每个宝石都有自己的防御等级,当你的魔法超过它的防御等级时它就会被你打下来. ...

  5. h5专题常用小代码

    今天把做专题常用的js代码总结出来(持续更新),方便以后直接复制使用,不用老敲啊敲 1.屏幕适配JS代码 <script> var phoneScale = parseInt(window ...

  6. lsof 简介

    lsof(list open files)是一个列出当前系统打开文件的工具.在linux环境下,任何事物都以文件的形式存在,通过文件不仅仅可以访问常规数据,还可以访问网络连接和硬件.所以如传输控制协议 ...

  7. C#设计模式——抽象工厂

    一.引言 我相信看到这段文字的人,都具备了良好的技术功底.但是对于自己编写的代码总是充满抱怨,希望能够将自己编写的代码如同房子一般先进行有效 的设计,然后在进行建设.那么这篇文章能够给你一些思路,这里 ...

  8. Dynamic CRM 2013学习笔记（十八）根据主表状态用JS控制子表自定义按钮

    有时要根据主表的审批状态来控制子表上的按钮要不要显示,比如我们有一个需求审批通过后就不能再上传文件了. 首先打开Visual Ribbon Editor, 如下图,我们可以利用Enable Rules ...

  9. Windows 8.1 开发过程中遇到的小问题（2）

    又是在Windows 8.1 的分享功能,再次出现错误: A COM call (IID: ***, method index: *) to an ASTA (thread *) was blocke ...

  10. html5之touch事件

    前言 一个触屏网站到底和传统的pc端网站有什么区别呢,交互方式的改变首当其冲.例如我们常用的click事件,在触屏设备下是如此无力. 手机上的大部分交互都是通过touch来实现的,于是,对于触屏的交互 ...