CSS3 3d特效 學習筆記
CSS3的動畫功能
- transition 從一個屬性值平滑地過渡到另一個屬性值
- animation 主要用於實現關鍵幀動畫，產生更加複雜的動畫效果
一、transition
1.transition:<過渡屬性名稱><過渡時間>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#block{
width:400px;
height:400px;
background-color: #69c;
margin: 0 auto;
/*設置背景顏色的漸變*/
-webkit-transition: background-color 2s;
transition: background-color 2s;
/*等價於：
transition-property:background-color;
transition-duration:2s;
*/
}
#block:hover{
background-color: indianred;
}
</style>
</head>
<body>
<div id="block">
</div>
</body>
</html>2.多個屬性的過渡效果
- translation:<屬性名1><過渡時間1>,<屬性名2><過渡時間2>
- translation:<屬性名1><過渡時間1>;
translation:<屬性名2><過渡時間2>;
3.translation過渡模式
translation:<屬性名稱><過渡時間><過渡模式>
- ease 緩慢開始，緩慢結束 (default)
- linear 勻速
- ease-in 緩慢開始
- ease-out 緩慢結束
- ease-in-out 緩慢開始，緩慢結束
二、創建簡單的3D場景
1.設置3d場景
-webkit-perspective:800px;
-webkit-perspective-origin:50% 50%;//視點的位置
2.使用transform屬性調整元素
-webkit-transform-style:preserve-3d;(1)translate
- translateX(x px)
- translateY(y px)
- translateZ(z px)
(2)rotate
- rotateX(x deg)
- rotateY(y deg)
- rotateZ(z deg)
三維平移實例
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#experiment{
-webkit-perspective: 800px;
-webkit-perspective-origin: 50% 50%;
-webkit-transition: -webkit-transform 1s linear;
-webkit-transform-style: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" onchange="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" onchange="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" onchange="translateall()" /><br/>
</div>
</body>
</html>3.使用transform-origin調整旋轉中心
（1）x軸
- left
- center
- right
（2）y軸
- top
- center
- bottom
（3）z軸
length px
三、頁面3d切換實例
<!DOCTYPE html>
<html>
<head>
<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>
</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:prev();">previous</a>
</div>
<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 prev() {
if (curIndex === 1)
return;
var curPage = document.getElementById("page" + curIndex);
curPage.style.webkitTransform = "rotateX(90deg)";
curIndex--;
var prevPage = document.getElementById("page" + curIndex);
prevPage.style.webkitTransform = "rotateX(0deg)";
}
</script>
</body>
</html>效果分析：
