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（下）2D/3D转换&animate动画
一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...
- HTML5 CSS3专题 纯CSS打造相冊效果
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这种一个样例.感觉效果还不错,不记得啥时候 ...
- 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 ...
随机推荐
- ubuntu Server 安装 php5
ubuntu Server 安装 php5 1:如果你的服务器已经安装了apache2组件,那么在安装php5时,可以把对应apache2的php5组件一起安装 sudo apt-get instal ...
- 使用Draw rect 绘制圆角矩形
- (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); UIGraphicsPush ...
- Sql_Handle and Plan_Handle Explained
For batches, the SQL handles are hash values based on the SQL text. For database objects such as sto ...
- 算法笔记_111:第五届蓝桥杯软件类省赛真题（Java本科A组）试题解答
目录 1 猜年龄 2 李白打酒 3 神奇算式 4 写日志 5 锦标赛 6 六角填数 7 绳圈 8 兰顿蚂蚁 9 斐波那契 10 波动数列 前言:以下试题解答代码部分仅供参考,若有不当之处,还请路 ...
- TP3.2 APP_DEBUG=false关闭调试后访问不了。页面错误！请稍后再试~
在APP_DEBUG=true时是没问题的,在APP_DEBUG=false时才会出现找不到模板的问题. 经过排查可能是模板文件找不到问题,之前是这么写的. 改为这个就好了. ----------- ...
- jsp页面获取集合的长度
createTime--2016年10月12日16:20:02Author:Marydonjsp页面获取集合的长度 在jsp页面与js中不能通过${list.size}取列表长度,而是引入jstl ...
- eclipse properties文件插件
eclipse properties插件 CreateTime--2018年4月22日22:51:34 Author:Marydon 下载地址:properties文件插件.rar 1.将plug ...
- .NET 垃圾回收机制要点整理
1. .NET资源分托管资源和非托管资源,对于托管资源,.NET GC可以很好的回收无用的垃圾,而对于非托管(例如文件访问,网络访问等)需要手动清理垃圾(显式释放). 2. 非托管资源的释放,.NET ...
- 如何通过from语句调用模块的变量名？
# -*- coding: utf-8 -*- #python 27 #xiaodeng #如何通过from语句调用模块的变量名? #my.py def printer(x): print x #如何 ...
- 用户研究Q&A（1）
近来,不少同事开始认同用户研究的价值,希望通过接触,理解和研究用户来获取提升产品的有效信息.这绝对是件好事,因为我一直抱持的理念是,研究并不是藏在实验室或者握在少部分人手中的稀罕货,更重要是一种理念和 ...