学html css3,css3和html5的学习

关于的html5的使用：

transition----含义是：过渡的过程，能够对各种属性设置变化。

有5中过渡的形式：ease、linear、ease-in、ease-out、ease-in-out。

html5 transition

#block_bar1{

40px;

height: 100px;

background-color: #69c;

-webkit-transition:width 5s ease;

}

#block_bar1:hover{

600px;

height: 100px;

background-color: #ff0000;

}

#block_bar2{

40px;

height: 100px;

background-color: #69c;

-webkit-transition:width 5s linear;

}

#block_bar2:hover{

600px;

height: 100px;

background-color: #ff0000;

}

#block_bar3{

40px;

height: 100px;

background-color: #69c;

-webkit-transition:width 5s ease-in;

}

#block_bar3:hover{

600px;

height: 100px;

background-color: #ff0000;

}

#block_bar4{

40px;

height: 100px;

background-color: #69c;

-webkit-transition:width 5s ease-out;

}

#block_bar4:hover{

600px;

height: 100px;

background-color: #ff0000;

}

不同的变化形式。

transform-----含义是：改变，使…变形；转换，动词

该行为是html5新添加的一个特性，主要translate()、rotate()、scale()、skew()等属性能够设置出动画。

example1：

#test{

-webkit-perspective:800;

-webkit-perspective-origin: 50% 50%;

-webkit-transform-style:-webkit-preserve-3d;

}

#block{

500px;

height: 500px;

background-color: #69c;

margin: 100px auto;

-webkit-transform:rotateZ(30deg);

}

example2：

3dRotate

#test{

-webkit-perspective:800;

-webkit-perspective-origin:50% 50%;

-webkit-tranform-style:-webkit-preserve-3d;

}

#block{

200px;

height: 200px;

background-color: #6699cc;

margin:100px auto;

}

#option{

margin: 60px auto;

font-size: 16px;

font-weight: bold;

800px;

}

#option .range-control{ 700px;}

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;

}

rotateX:0 degree

rotateY:0 degree

rotateX:0 degree

使用transform对translate和rotate进行设置。

最后一个是3维场景的搭建和翻页效果：

#my3dspace{

-webkit-perspective:800;

-webkit-perspective-origin:50% 50%;

overflow: hidden;

}

#pagegroup{

400px;

height: 400px;

margin: 0px auto;

-webkit-transform-style:preserve-3d;

position: relative;

}

#op{

text-align: center;

margin:40px auto;

}

.page{

360px;

height: 360px;

padding: 20px;

background-color: #000;

color: #fff;

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);

}

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 nextPage = document.getElementById("page"+curIndex);

nextPage.style.webkitTransform = "rotateX(0deg)";

}

1

2

3

4

5

6

next previous