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

转载请标明出处：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旋转木马效果相册的更多相关文章

HTML5 CSS3 专题：诱人的实例 3D旋转木马效果相冊
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...
HTML5 CSS3专题诱人的实例 CSS3打造百度贴吧的3D翻牌效果
首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放 ...
HTML5 CSS3专题纯CSS打造相冊效果
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这种一个样例.感觉效果还不错,不记得啥时候 ...
前端笔记之HTML5&CSS3（下）2D/3D转换&animate动画
一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...
html5+css3实现跑动的爱心/动态水滴效果[原创][5+3时代]
大风起兮云飞扬,安得猛士兮走四方!html5+css3,不学不行. 做web开发已经有好几年了,见证了太多语言的崛起和陨落. 其实作为一个程序员最苦逼的事情莫过于每天要不停的追赶各大公司新出的框架和语 ...
HTML5+CSS3制作无限滚动与文字跳动效果
㈠用HTML5+CSS3做无限滚动效果 ⑴逻辑分析 ⑵实践示例前5张图片为所有图片显示区,假设总长度为1100px: 后面出现的五张图片为克隆区,只是将前面的图片拷贝了一份: 然后将前五张和后五张的 ...
jQuery仿3D旋转木马效果插件(带索引按钮)
项目中需要用到旋转木马效果,但是我在网上找的插件,基本都是不带按钮或者只是带前后按钮的,而项目要求的是带索引按钮,也就是说有3张图片轮播,对应的要有3个小按钮,点击按钮,对应的图片位于中间位置.于是就 ...
HTML5 CSS3 专题：诱人的实例 3D展示商品信息
强化下perspective和transform:translateZ的用法.传统的商品展示或许并不能很好的吸引用户的注意力,但是如果在展示中添加适当的3D元素,~说不定效果不错哈~ 效果图: 说明一 ...
CSS3 实现3D旋转木马效果
基本原理: 1.首先我们需要让图片能旋转的效果,我们让所有图片绝对定位(position:absolute),共用一个中心点. 2.对于舞台我们加一个视距,比如下面的demo是 perspective ...

随机推荐

PS 滤镜算法原理——碎片效果
%%% Fragment %%% 对原图做四个方向的平移,然后对平移的结果取平均 %%% 碎片效果 clc; clear all; Image=imread('4.jpg'); Image=doubl ...
HBase丢失数据的故障和原因分析
hbase的稳定性是近期社区的重要关注点,毕竟稳定的系统才能被推广开来,这里有几次稳定性故障和大家分享. 第一次生产故障的现象及原因现象: 1 hbase发现无法写入 2 通过hbc ...
本人在CSDN上的技术博客访问量突破了10万次，特此截图留念
从 2011-11-16在CSDN开博至今,将近三年. 在近三年的时间里,本博的访问量于2014-07-01突破了10万次,单篇博文<软件开发高手须掌握的4大SQL精髓 ...
Demo2
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
CALayer简介
一.什么是CALayer * 在iOS系统中,你能看得见摸得着的东西基本上都是UIView,比如一个按钮.一个文本标签.一个文本输入框.一个图标等等,这些都是UIView. * 其实UIView之所以 ...
Spring ioc 详解
引述:IoC(控制反转:Inverse of Control)是Spring容器的内核,AOP.声明式事务等功能在此基础上开花结果.但是IoC这个重要的概念却比较晦涩隐讳,不容易让人望文生义,这不能不 ...
Postgresql 启动could not create listen socket for "localhost"错误的解决
新装的postgresql在第一次启动时可能会遇到错误,日志中的记录是: could not create listen socket for "localhost" 到/etc/ ...
PHP判断客户端是否使用代理服务器及其匿名级别
要判断客户端是否使用代理服务器,可以从客户端所发送的环境变量信息来判断. 具体来说,就是看HTTP_VIA字段,如果这个字段设置了,说明客户端使用了代理服务器. 匿名级别可以参考下表来判断. 给出一个 ...
Yii2访问自定义模块下的controller
之前,由于所要访问的controller都是位于根目录下的controllers目录下,就像下面这样: 此时,我们可以直接通过 localhost/basic/web/index.php?r=dao/ ...
linux CentOS6.5 yum安装mysql 5.6
1.新开的云服务器,需要检测系统是否自带安装mysql # yum list installed | grep mysql 2.如果发现有系统自带mysql,果断这么干 # yum -y remove ...

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

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

随机推荐

热门专题

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

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