转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/32964301

首先说明一下创意的出处：http://www.zhangxinxu.com/study/201209/pictures-3d-slide-view.html（张鑫旭的博客 ），对前台感兴趣的可以没事去看看他的博客，很给力~

这篇博客的目的是因为上篇HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果中有个关于CSS 3D效果的比较重要的知识点没讲到，就是perspective和tranlateY

效果图：嘿嘿，我把大学毕业时的一些照片，做成旋转木马，绕着我大文理旋转，不忘母校的培育之恩~

1、perspective

perspective属性包括两个属性：none和具有单位的长度值。

其中perspective属性的默认值为none，表示无限的角度来看3D物体，但看上去是平的。另一个值<length>接受一个长度单位大于0的值。而且其单位不能为百分比值。<length>值越大，角度出现的越远，从而创建一个相当低的强度和非常小的3D空间变化。反之，此值越小，角度出现的越近，从而创建一个高强度的角度和一个大型3D变化。简单一点说：当perspective设置length时，如果越小则表示3D效果越明显，你的眼睛就越靠近3D物体，反之则反之。

2、transform: translateZ(length)

假设设置了perspective：300px时，设置translateZ的值越小则子元素大小越小，当设置值接近300px时，则仿佛此元素在面前，当超过300px以后，则以前到达你视野的后面，该元素就不可见了。

上例的核心：

1、首先所有的图片的容器position:absolute，叠加在一起，然后一次设置rotateY分别为40*i ，i= 0 , 1, 2...9 ；所有图片会相交成一个类似花的形状

2、然后为每个图片的容器设置translateZ，所有图片会从对应的角度向外移动，扩展成一个大圆，即上图效果。

html:

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8"/>

    <link href="css/reset.css" rel="stylesheet" type="text/css"/>

    <script type="text/javascript" src="../../jquery-1.8.3.js"></script>

    <script type="text/javascript">

        // alert( 64 / Math.tan(20 / 180 * Math.PI));

        var transform = function (element, value, key)

        {

            key = key || "Transform";

            ["Moz", "O", "Ms", "Webkit", ""].forEach(function (prefix)

            {

                element.style[prefix + key] = value;

            });

            return element;

        }

        $(function ()

        {

            var deg = -40 , i = 1;

            $("#container").click(function ()

            {

                transform($(this)[0], "rotateY(" + (deg * i++) + "deg)")

            });

        });

    </script>

</head>

<body>

<div id="stage">

    <ul id="container">

        <li>

            <img src="img/1.jpg"/>

            <span>Do one thing at a time, and do well..</span>

        </li>

        <li>

            <img src="img/2.jpg"/> <span>Do one thing at a time, and do well..</span>

        </li>

        <li>

            <img src="img/3.jpg"/> <span>Keep on going never give up.</span>

        </li>

        <li>

            <img src="img/4.jpg"/> <span>Whatever is worth doing is worth doing well.</span>

        </li>

        <li>

            <img src="img/5.jpg"/> <span>Believe in yourself.</span>

        </li>

        <li>

            <img src="img/6.jpg"/> <span>Action speak louder than words.</span>

        </li>

        <li>

            <img src="img/7.jpg"/> <span>Never put off what you can do today until tomorrow.</span>

        </li>

        <li>

            <img src="img/8.jpg"/> <span>Jack of all trades and master of none.</span>

        </li>

        <li>

            <img src="img/9.jpg"/> <span>Judge not from appearances.</span>

        </li>

    </ul>

</div>

</body>

</html>

CSS：

        li

        {

            width: 128px;

            box-shadow: 0 1px 3px rgba(0, 0, 0, .5);

            position: absolute;

            bottom: 0;

        }

        li img

        {

            width: 128px;

            box-shadow: 0 1px 3px rgba(0, 0, 0, .5);

            vertical-align: middle;

        }

        li span

        {

            display: block;

            width: 128px;

            text-align: center;

            color: #333;

            font-size: 8px;

        }

        #stage

        {

            width: 900px;

            min-height: 100px;

            margin-left: auto;

            margin-right: auto;

            padding: 100px 50px;

            -webkit-perspective: 1200px;

            position: relative;

        }

        #container

        {

            background: url("img/xawl.jpg") no-repeat 0 0;

            margin-top: 200px;

            width: 128px;

            box-shadow: 0 1px 3px rgba(0, 0, 0, .5);

            height: 100px;

            margin-left: -64px;

            -webkit-transition: -webkit-transform 1s;

            transition: transform 1s;

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

            position: absolute;

            left: 50%;

        }

        li:nth-child(0)

        {

            -webkit-transform: rotateY(0deg) translateZ(300px);

        }

        li:nth-child(1)

        {

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

        }

        li:nth-child(2)

        {

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

        }

        li:nth-child(3)

        {

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

        }

        li:nth-child(4)

        {

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

        }

        li:nth-child(5)

        {

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

        }

        li:nth-child(6)

        {

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

        }

        li:nth-child(7)

        {

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

        }

        li:nth-child(8)

        {

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

        }

        li:nth-child(9)

        {

            -webkit-transform: rotateY(360deg) translateZ(300px);

        }

div#stage作为舞台，设置perspective，每个li分别设置rotateY，以及translateZ；然后我们会div#container设置了-webkit-transform-style: preserve-3d;

transform-style: flat | preserve-3d

其中flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。如果对一个元素设置了transform-style的值为preserve-3d，它表示

不执行平展操作，他的所有子元素位于3D空间中。一般情况下，此属性用于3D动画效果的执行元素，即就是它要应用3D动画效果，所以它的子元素都应该在3D空间。

有一点要注意：本例子，其实正在的动画效果，在于鼠标点击，div#container在不端的改变rotateY，所有的图片元素均在div#container中，且已经展现为旋转木马效果，现在要做的就是旋转这个木马，所以只需要每次改变div#container的rotateY 40角度即可。

欢迎各位指点~

源码点击下载

版权声明：本文为博主原创文章，未经博主允许不得转载。

HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相册的更多相关文章

  1. HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相冊

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...

  2. HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果

    首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放 ...

  3. HTML5 CSS3专题 纯CSS打造相冊效果

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这种一个样例.感觉效果还不错,不记得啥时候 ...

  4. 前端笔记之HTML5&CSS3（下）2D/3D转换&animate动画

    一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...

  5. html5+css3实现跑动的爱心/动态水滴效果[原创][5+3时代]

    大风起兮云飞扬,安得猛士兮走四方!html5+css3,不学不行. 做web开发已经有好几年了,见证了太多语言的崛起和陨落. 其实作为一个程序员最苦逼的事情莫过于每天要不停的追赶各大公司新出的框架和语 ...

  6. HTML5+CSS3制作无限滚动与文字跳动效果

    ㈠用HTML5+CSS3做无限滚动效果 ⑴逻辑分析 ⑵实践示例 前5张图片为所有图片显示区,假设总长度为1100px: 后面出现的五张图片为克隆区,只是将前面的图片拷贝了一份: 然后将前五张和后五张的 ...

  7. jQuery仿3D旋转木马效果插件(带索引按钮)

    项目中需要用到旋转木马效果,但是我在网上找的插件,基本都是不带按钮或者只是带前后按钮的,而项目要求的是带索引按钮,也就是说有3张图片轮播,对应的要有3个小按钮,点击按钮,对应的图片位于中间位置.于是就 ...

  8. HTML5 CSS3 专题 ：诱人的实例 3D展示商品信息

    强化下perspective和transform:translateZ的用法.传统的商品展示或许并不能很好的吸引用户的注意力,但是如果在展示中添加适当的3D元素,~说不定效果不错哈~ 效果图: 说明一 ...

  9. CSS3 实现3D旋转木马效果

    基本原理: 1.首先我们需要让图片能旋转的效果,我们让所有图片绝对定位(position:absolute),共用一个中心点. 2.对于舞台我们加一个视距,比如下面的demo是 perspective ...

随机推荐

  1. Objective-C的面向对象特性（二）

    在Objective-C语言中, 类别.类扩展(也称为匿名类别)以及协议是Objective-C 语言级别支持的模式,用来实现对类进行功能扩展. 一.类别--用来增加方法到已存在类 声明一个类别的语法 ...

  2. Netfilter的使用和实现

    本文主要内容:Netfilter的原理和实现浅析,以及示例模块. 内核版本:2.6.37 Author:zhangskd @ csdn blog 概述 Netfilter为多种网络协议(IPv4.IP ...

  3. Dijkstra算法 c语言实现

    Dijkstra(迪杰斯特拉)算法是典型的最短路径路由算法,用于计算一个节点到其他所有节点的最短路径.主要特点是以起始点为中心向外层层扩展,直到扩展到终点为止.Dijkstra算法能得出最短路径的最优 ...

  4. 如何让minicom换行

    以前在使用minicom验证裸板代码的时候,经常会遇到以下这个问题: 通常一直打数据往后打就只能打一行,然后就不能换行了,遇到这个问题如何解决? 看到屏幕下方提示:CTRL-A  Z  for hel ...

  5. javascript、ruby和C性能一瞥(1)

    测试一下本地js.浏览器中的js以及ruby对于类似算法的性能.结果有些意外:浏览器js最快,本地其次当相差很小:ruby最慢而且不是一个数量级的: 因为写的匆忙,可能有重大问题没能看出来,请各位高人 ...

  6. LeetCode(63)-First Bad Version

    题目: You are a product manager and currently leading a team to develop a new product. Unfortunately, ...

  7. DB Query Analyzer 5.02 is distributed, 53 articles concerned have been published

    DB Query Analyzer is presented by Master Gen feng, Ma from Chinese Mainland. It has English version ...

  8. 恶补web之二:css知识(1)

    css指层叠样式表(Cascading Style Sheets)     样式定义如何显示html元素,样式通常存储在样式表里.把样式添加到html4.0中,是为了解决内容与表现分离的问题.外部样式 ...

  9. iOS使用第三方管理工具

    1.安装cocoaPods 移除当前镜像,因为需要FQ跨域访问 001.gem source --remove https://rubygems.org/ 使用淘宝镜像安装 002.https://r ...

  10. $("li")是对象类型不是数组类型