CSS3之 3D变换、3D动画
3D变换
transform-style（preserve-3d） 建立3D空间
Perspective 景深（类似于站在多远地方看）
Transform 新增函数
1) rotateX()
<style>
.box{width:100px;height:100px;padding:100px;border:5pxsolid #000;margin:30px auto; -webkit-transform-style:preserve-3d;-webkit-perspective:100px;}
.div{width:100px;height:100px;background:Red;transition:1s;}
.box:hover .div{-webkit-transform:rotateX(180deg);}
</style>
</head>
<body>
<divclass="box">
<div class="div">111</div>
</div>
</body>
2) rotateY()
<style>
.box{width:100px;height:100px;padding:100px;border:5pxsolid #000;margin:30px auto; -webkit-transform-style:preserve-3d;-webkit-perspective:100px;}
.div{width:100px;height:100px;background:Red;transition:1s;}
.box:hover .div{-webkit-transform:rotateY(180deg);}
</style>
</head>
<body>
<divclass="box">
<div class="div">111</div>
</div>
</body>
3) rotateZ()
<style>
.box{width:100px;height:100px;padding:100px;border:5pxsolid #000;margin:30px auto;-webkit-transform-style:preserve-3d;-webkit-perspective:100px;}
.div{width:100px;height:100px;background:Red;transition:1s;}
.box:hover .div{-webkit-transform:rotateZ(180deg);}
</style>
</head>
<body>
<divclass="box">
<div class="div">111</div>
</div>
</body>
4) translateZ（）
<style>
.box{width:100px;height:100px;padding:100px;border:5pxsolid #000;margin:30px auto; -webkit-transform-style:preserve-3d;-webkit-perspective:200px;}
.div{width:100px;height:100px;background:Red;transition:1s;}
.box:hover .div{-webkit-transform:translateZ(-100px);}
</style>
</head>
<body>
<divclass="box">
<div class="div">111</div>
</div>
</body>
3D动画
l 关键帧——keyFrames
• 类似于flash
– 只需指明两个状态，之间的过程由计算机自动计算
• 关键帧的时间单位
– 数字：0%、25%、100%等
– 字符：from(0%)、to(100%)
• 格式
@keyframes动画名称
{
动画状态
}
l 格式(2)
@keyframes miaov_test
{
from { background:red; }
to { background:green; }
}
l 可以只有to
l 调用的标签(#div1、xxx:hover之类的)
l 必要属性
l animation-name 动画名称（关键帧名称）
l animation-duration 动画持续时间
l 例如：
l -webkit-animation-name:‘miaov';
l -webkit-animation-duration:4s;
例1：
0%和100%不写，为元素初始值
<style>
@-webkit-keyframes move
{
0%{
width:100px;
}
100%
{
width:500px;
}
}
.box{width:100px;height:100px;background:red;-webkit-animation:2s move;}
</style>
</head>
<body>
<divclass="box"></div>
</body>
例2：从100运动到1000，再返回100
<style>
@-webkit-keyframes move
{
50%
{
width:1000px;
}
}
@-moz-keyframes move
{
50%
{
width:1000px;
}
}
@keyframes move
{
50%
{
width:1000px;
}
}
.box{width:100px;height:100px;background:red;-webkit-animation:2s move;
-moz-animation:2smove;animation:2s move;}
</style>
</head>
<body>
<divclass="box"></div>
</body>
l 可选属性
• animation-timing-function 动画运动形式
– linear 匀速。
– ease 缓冲。
– ease-in 由慢到快。
– ease-out 由快到慢。
– ease-in-out 由慢到快再到慢。
– cubic-bezier(number, number, number, number)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
<style>
@-webkit-keyframes move
{
50%
{
width:1000px;
}
}
.box{width:100px;height:100px;background:red;-webkit-animation:5s move ease-in;
}
</style>
</head>
<body>
<divclass="box"></div>
</body>
• animation-iteration-count 重复次数
– infinite为无限次
<style>
@-webkit-keyframes move
{
50%
{
width:1000px;
}
}
.box{width:100px;height:100px;background:red;-webkit-animation:1s move ease-in infinite;
}
</style>
</head>
<body>
<divclass="box"></div>
</body>
围绕四周运动
<style>
@-webkit-keyframes domove
{
0%
{
top:0;left:0;
}
25%
{
top:0;left:300px;
}
50%
{
top:300px;left:300px;
}
75%
{
top:300px;left:0px;
}
100%
{
top:0;left:0;
}
}
#wrap{width:400px;height:400px;border:1pxsolid #000; position:relative; border:5px solid #000;}
.box{width:100px;height:100px;background:red;position:absolute;left:0;top:0; -webkit-animation:4s domove infinite linear;}
</style>
</head>
<body>
<divid="wrap">
<divclass="box"></div>
</div>
</body>
• animation-direction 播放前重置
– 动画是否重置后再开始播放
– alternate 动画直接从上一次停止的位置开始执行
– normal 动画第二次直接跳到0%的状态开始执行
实现四周来回运动
<style>
@-webkit-keyframes domove
{
0%
{
top:0;left:0;
}
25%
{
top:0;left:300px;
}
50%
{
top:300px;left:300px;
}
75%
{
top:300px;left:0px;
}
100%
{
top:0;left:0;
}
}
#wrap{width:400px;height:400px;border:1pxsolid #000; position:relative; border:5px solid #000;}
.box{width:100px;height:100px;background:red;position:absolute;left:0;top:0; -webkit-animation:4s domove infinite linear alternate;}
</style>
</head>
<body>
<div id="wrap">
<divclass="box"></div>
</div>
</body>
animation-play-state 播放状态（ running 播放 和paused暂停 ）
鼠标移入，停止动画
<style>
@-webkit-keyframes domove
{
0%
{
top:0;left:0;
}
25%
{
top:0;left:300px;
}
50%
{
top:300px;left:300px;
}
75%
{
top:300px;left:0px;
}
100%
{
top:0;left:0;
}
}
#wrap{width:400px;height:400px;border:1pxsolid #000; position:relative; border:5px solid #000;}
.box{width:100px;height:100px;background:red;position:absolute;left:0;top:0; -webkit-animation:4s domove infinite linearalternate;}
#wrap:hover .box{
-webkit-animation-play-state:paused;
}
</style>
</head>
<body>
<divid="wrap">
<divclass="box"></div>
</div>
</body>
animate——和JS结合
l 通过class
• 在class里加入animation的各种属性
• 直接给元素加-webkit-animation-xxx样式
l animation的问题
• 写起来麻烦
• 没法动态改变目标点位置
•
• obj.addEventListener('webkitAnimationEnd', function (){},false);
•
关于结束位置的停止
<style>
@-webkit-keyframes move
{
0%{
width:100px;
}
100%
{
width:500px;
}
}
@-moz-keyframes move
{
0%{
width:100px;
}
100%
{
width:500px;
}
}
@keyframes move
{
0%{
width:100px;
}
100%
{
width:500px;
}
}
.box{height:100px;background:red;}
.move{ -webkit-animation:2smove;-moz-animation:2s move;animation:2s move;width:500px;}
</style>
</head>
<body>
<div class="boxmove" id="box"></div>
<script>
document.getElementById("box").οnclick=function()
{
this.className="box move";
addEnd(this,fn);
};
function fn()
{
alert("end");
}
function addEnd(obj,fn)
{
obj.addEventListener('webkitAnimationEnd',fn, false);
obj.addEventListener('animationend',fn, false);
}
</script>
</body>
综合案例：无缝滚动
<style>
@-webkit-keyframes move
{
0%{
left:0;
}
100%
{
left:-500px;
}
}
#wrap{width:500px;height:100px;border:1px solid #000; position:relative;margin:100pxauto; overflow:hidden;}
#list{position:absolute;left:0;top:0;margin:0;padding:0; -webkit-animation:3smove infinite linear; width:200%;}
#list li{list-style:none;width:98px;height:98px;border:1px solid #fff;background:#000;color:#fff; font:50px/98px Arial; text-align:center; float:left;}
#wrap:hover #list{-webkit-animation-play-state:paused;}
</style>
</head>
<body>
<divid="wrap">
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
