本篇由3部分组成:
Part I : transition的介绍
Part II : 创建一个3D场景
Part III : 根据以上两个部分创建3D效果
----------------------------------------------------
Part I
CSS3有两个主要的动画效果:
1.transition:
2.animation
通过关键帧的技术,在网页上产生更加复杂的动画效果。
本章节只讲transition的部分:
一.浏览器的支持
-webkit-transition : 适用于Chrome和Safari
-moz-transition : 使用于Firefox
-o-transition :使用于Opera
本章节都使用Chrome浏览器进行讲解:
语法:transition:<过渡属性名称><过渡时间><过渡模式><延迟模式>
transition: property duration timing-function delay;
这是一个缩写的形式。
transition 属性是一个简写属性,用于设置四个过渡属性:
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
注释:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。
举例:
-webkit-transition:background-color 2s;
上面也可以写成如下形式:
-webkit-transition-proper:background-color;
-webkit-transition-duration:2s;
就是背景颜色进行了一个2s的渐变过程。如下所示,由黑色渐变成红色
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Transition</title>
<style>
#block{
width: 400px;
height: 400px;
background-color: black;
margin: auto;
-webkit-transition:background-color 2s;
}
#block:hover{
background-color: red;
}
</style>
</head>
<body>
<div id ="block">
</div>
</body>
</html>
其中的过渡模式(transition-timing-function)有五种效果:
示例代码如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#wrapper{
width:1024px;
margin:0 auto;
}
.progress-bar{
height:40px;
width:40px;
background-color: #69c;
}
.progress-bar:hover{
width:960px;
}
#bar1{
-webkit-transition: width 5s linear;
}
#bar2{
-webkit-transition: width 5s ease;
}
#bar3{
-webkit-transition: width 5s ease-in;
}
#bar4{
-webkit-transition: width 5s ease-out;
}
#bar5{
-webkit-transition: width 5s ease-in-out;
}
</style>
</head>
<body>
<div id="wrapper">
<p>linear</p>
<div class="progress-bar" id="bar1"></div>
<p>ease</p>
<div class="progress-bar" id="bar2"></div>
<p>ease-in</p>
<div class="progress-bar" id="bar3"></div>
<p>ease-out</p>
<div class="progress-bar" id="bar4"></div>
<p>ease-in-out</p>
<div class="progress-bar" id="bar5"></div>
</div>
</body>
</html>
把鼠标放在各自的div里会产生各种效果。
目前的transition都只是对单一的属性进行操作,其实可以同时进行操作,语法如下:
方法一:(要用逗号分隔开)
-webkit-transition:<属性1><时间1> , <属性2><时间2> ,….;
方法二:
-webkit-transition:<属性1><时间1>;
-webkit-transition: <属性2><时间2> ;
目前为止,Transition的介绍已经完毕。
-------------------------------------------------------------------------------
Part II
第二部分介绍:如何创建一个3D场景。
可能很多人会问为何要创建一个3D场景。
这是因为对于浏览器来说,本身就是一个平面,我们去观看里面的物体就是一个2D的效果。
而对于3D来说,是在2D的基础上再增加一个维度,也就是深度。
这时,浏览器可能就不是一个页面了,它变成了一个窗口。
我们在外面需要通过哪个视角去观察这个窗口,以及窗口里面的物体距离窗口距离的大小。
所以需要设置两个属性值:
-webkit-perspective:800px;
-webkit-perspective-origin:50% 50%;
如下图所示:
但是当我们把场景设置好,如果物体不进行其他的操作,看起来的效果还是跟2D没有任何区别。
所以需要transform属性来进行操作:
-translate(位移操作)
-rotate
下面两个demo分别展示了translate操作和rotate操作:
1.自定义位移操作
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#experiment{
-webkit-perspective: 800;
-webkit-perspective-origin: 50% 50%;
-webkit-transition: -webkit-transform 1s linear;
-webkit-transform-style:-webkit-preserve-3d;
}
#block{
width:150px;
height:150px;
background-color: #69c;
margin:170px auto;
}
#op{
margin:0 auto;
font-size:16px;
font-weight:bold;
width:800px;
}
#op .range-control{width:721px;}
</style>
<script type="text/javascript">
function translateall(){
var x = document.getElementById("translatex").value;
var y = document.getElementById("translatey").value;
var z = document.getElementById("translatez").value;
document.getElementById('block').style.webkitTransform = "translateX("+x+"px) translateY("+y+"px) translateZ("+z+"px)";
document.getElementById('translatex-span').innerText = x;
document.getElementById('translatey-span').innerText = y;
document.getElementById('translatez-span').innerText = z;
}
</script>
</head>
<body>
<div id="experiment">
<div id="block">
</div>
</div>
<div id="op">
<p>translate x: <span id="translatex-span">0</span> px</p>
<input type="range" min="-360" max="360" id="translatex" value="0" class="range-control" οnmοusemοve="translateall()" /><br/>
<p>translate y: <span id="translatey-span">0</span> px</p>
<input type="range" min="-360" max="360" id="translatey" value="0" class="range-control" οnmοusemοve="translateall()" /><br/>
<p>translate z: <span id="translatez-span">0</span> px</p>
<input type="range" min="-360" max="360" id="translatez" value="0" class="range-control" οnmοusemοve="translateall()" /><br/>
</div>
</body>
</html>
2.自定义选择操作:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#experiment{
-webkit-perspective: 800;
-webkit-perspective-origin: 50% 50%;
-webkit-transition: -webkit-transform 1s linear;
-webkit-transform-style:-webkit-preserve-3d;
}
#block{
width:150px;
height:150px;
background-color: #69c;
margin:170px auto;
}
#op{
margin:0 auto;
font-size:16px;
font-weight:bold;
width:800px;
}
#op .range-control{width:721px;}
</style>
<script type="text/javascript">
function rotate(){
var x = document.getElementById("rotatex").value;
var y = document.getElementById("rotatey").value;
var z = document.getElementById("rotatez").value;
document.getElementById('block').style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg) rotateZ("+z+"deg)";
document.getElementById('degx-span').innerText = x;
document.getElementById('degy-span').innerText = y;
document.getElementById('degz-span').innerText = z;
}
</script>
</head>
<body>
<div id="experiment">
<div id="block">
</div>
</div>
<div id="op">
<p>rotate x: <span id="degx-span">0</span> deg</p>
<input type="range" min="-360" max="360" id="rotatex" value="0" class="range-control" οnmοusemοve="rotate()" /><br/>
<p>rotate y: <span id="degy-span">0</span> deg</p>
<input type="range" min="-360" max="360" id="rotatey" value="0" class="range-control" οnmοusemοve="rotate()" /><br/>
<p>rotate z: <span id="degz-span">0</span> deg</p>
<input type="range" min="-360" max="360" id="rotatez" value="0" class="range-control" οnmοusemοve="rotate()" /><br/>
</div>
</body>
</html>
自此,第二部分讲完。
----------------------------------------------------
Part III
创建3D动画效果
接下来用使用以上技能来进行3D动画效果的制作:使用transition的动画效果 + transform的位移选择操作
再定义一个3D场景即可:(需要使用javascript,但是不难)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#my3dspace{
-webkit-perspective: 800px;
-webkit-perspective-origin: 50% 50%;
overflow: hidden;
}
#pagegroup{
width: 400px;
height: 400px;
margin: 0 auto;
-webkit-transform-style:preserve-3d;
position:relative;
}
.page{
width:360px;
height:360px;
padding:20px;
background-color: black;
color:white;
font-weight:bold;
font-size:360px;
line-height:360px;
text-align:center;
position: absolute;
}
#page1{
-webkit-transform-origin:bottom ;
-webkit-transition:-webkit-transform 1s linear;
}
#page2,#page3,#page4,#page5,#page6{
-webkit-transform-origin:bottom ;
-webkit-transition:-webkit-transform 1s linear;
-webkit-transform:rotateX(90deg);
}
#op{
text-align:center;
margin: 40px auto;
}
</style>
<script type="text/javascript">
var curIndex = 1;
function next(){
if( curIndex == 6 ){
return;
}
var curPage = document.getElementById("page" + curIndex);
curPage.style.webkitTransform = "rotateX(-90deg)";
curIndex ++;
var nextPage = document.getElementById("page" + curIndex);
nextPage.style.webkitTransform = "rotateX(0deg)";
}
function pre(){
if(curIndex == 1){
return ;
}
var curPage = document.getElementById("page" + curIndex);
curPage.style.webkitTransform = "rotateX(90deg)";
curIndex -- ;
var curPage = document.getElementById("page" + curIndex);
curPage.style.webkitTransform = "rotateX(0deg)";
}
</script>
</head>
<body>
<div id ="my3dspace">
<div id = "pagegroup">
<div class = "page" id = "page1">1</div>
<div class = "page" id = "page2">2</div>
<div class = "page" id = "page3">3</div>
<div class = "page" id = "page4">4</div>
<div class = "page" id = "page5">5</div>
<div class = "page" id = "page6">6</div>
</div>
</div>
<div id ="op">
<a href ="javascript:next()">next</a>
<a href ="javascript:pre()">pre</a>
</div>
</body>
</html>