您的位置：首页 > Web前端 > CSS

#学习笔记#(32)CSS3走马灯

2016-02-03 17:00 316 查看

来源：脚本之家http://www.jb51.net/css/266245.html

请用chrome或safari观看（只支持webkit浏览器）

知识点：

1 perspective 属性：

定义 3D 元素距视图的距离，以像素计。

该属性允许改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

当perspective:none/0;时，相当于没有设perspective(length)。

比如要建立一个小立方体，长宽高都是200px。如果perspective < 200px ，那就相当于站在盒子里面看的结果，如果perspective 非常大那就是站在非常远的地方看（立方体已经成了小正方形了）。

当元素没有设置perspective(length)时，所有后代元素被压缩在同一个二维平面上，不存在景深的效果。如果设置perspective(length)后，将会看到三维的效果。

默认的透视视角中心在容器(是perspective所在的元素，不是他的后代元素)的中点，也就是perspective-origin: 50% 50%。

当然你也可以自己设置，比如：左上角-webkit-perspective-origin: 0px 0px；。目前浏览器都不支持 perspective 属性。

Chrome 和 Safari 支持替代的 -webkit-perspective 属性。

2 走马灯原理：设置一个3D界面，再绘制走马灯的6个面，最后让这6个面绕着3D界面的中心轴旋转

3 transform-style 属性：规定如何在 3D 空间中呈现被嵌套的元素

transform-style:flat;元素不保留3D位置

transform-style:preserve-3d;元素保留其3D位置

4 keyframes属性：

@keyfrmes 动画名{

from{}to{}

}

类似flash关键帧，样式从from{}到to{}，也可以设置从0%{}到100%{}

调用动画animation-name:动画名;

动画时长animation-duration:10s;

播放方式animation-timing-function:linear | ease | ease-in | ease-out | ease-in-out;

播放方向animation-direction:normal | alternate;

播放次数animation-iteration-count:infinite | <number>;

播放状态animation-play-state:running | pasused

动画开始前和结束后的属性设置animation-fill-mode:none | forwards | backwards | both;
5 transform属性
transform:translateZ(100px);在Z轴进行位移
transform:rotateY(100deg);绕Y轴旋转100度
代码：

<!DOCTYPE html>
<html>
<head>
<meta charset='gb2312'/>
<title>CSS3跑马灯</title>
<style>
.container{
width:500px;
height:400px;
margin:100px auto;
position:relative;

-webkit-perspective:2000;
-webkit-perspective-origin:50% -100%;
}
.rotate{
-webkit-transform-style:preserve-3d;
-webkit-animation-name:rotation;
-webkit-animation-duration:6s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
}
.rotate:hover{
-webkit-animation-play-state:paused;
}
.page{
width:200px;
height:300px;
position: absolute;
}
.page1{
background-color:green;
-webkit-transform:translateZ(75px) rotateY(-60deg);
}
.page2{
background-color:blue;
left:150px;
-webkit-transform:translateZ(160px);

}
.page3{
background-color:yellow;
left:300px;
-webkit-transform:translateZ(75px) rotateY(60deg);

}
.page4{
background-color:orange;
left:300px;
-webkit-transform:translateZ(-95px) rotateY(120deg);
}
.page5{
background-color:gray;
left:150px;
-webkit-transform:translateZ(-180px) rotateY(180deg);
}
.page6{
background-color:red;
-webkit-transform:translateZ(-95px) rotateY(-120deg);
}
@-webkit-keyframes rotation{
from{
-webkit-transform:rotateY(0deg);
}
to{
-webkit-transform:rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="container"><!--3D界面-->
<div class="rotate"><!--6个面-->
<div class="page page1">1</div>
<div class="page page2">2</div>
<div class="page page3">3</div>
<div class="page page4">4</div>
<div class="page page5">5</div>
<div class="page page6">6</div>
</div>
</div>
</body>
</html>

注：位移和角度的数值计算还没理清，只通过效果进行了大致调整

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航