html动画翻书特效,css3 做一个类似于翻书特效的3D动画

我们来看下做一个css3 3D动画需要哪些东西。前面我们已经使用transition和transform做了一些简单的操作。

设置3D场景

做3D动画，我们首先要设置3D场景。3D场景我们通常用perspective和perspective-origin两个属性设定。

说明各个属性的作用：

perspective:800;代表3D物体距离浏览器是800px。

perspective-origin:50% 50%;眼睛视角的中心点，分别在xy轴的50%的地方。

设置了这两个属性之后，浏览器中的物体已经变成三维物体。这个时候我们就可以做3D动画了。

transform 3D操作

transform既可以做3D操作也可以做2D操作，为了区分是3D还是2D，我们需要加个样式属性。加了这个样式之后，就代表在动画中我们要做3D操作。

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

我们用图片表示在三维世界里xyz轴的方向(x轴是向右的，y轴是向下的，z轴的方向相当于从屏幕指向我们的)。

下面我们做一个向下翻页的数字，和一个向做翻页的数字。

做一个向下翻页的动画

#my3dspace{

/* 设置3D场景，距离人眼800像素，原点在50% 50%的位置 */

-webkit-perspective:800;

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

overflow: hidden;

}

#pagegroup{

width: 400px;

height: 400px;

margin: 0 auto;

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

/* 告诉浏览器里面的元素进行3D转换 */

position: relative;

}

.page{

position: absolute;

left: 0;

top: 0;

width: 360px;

height: 360px;

padding: 20px;

background: #000;

color: #fff;

font-weight: bold;

font-size: 360px;

line-height: 360px;

text-align: center;

}

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

}

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

}

1

2

3

4

5

6

next

previous

做一个向左翻页的动画——类似于翻书的特效

#my3dspace{

/* 设置3D场景，距离人眼800像素，原点在50% 50%的位置 */

-webkit-perspective:800;

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

width: 360px;

overflow: hidden;

margin: auto;

}

#pagegroup{

width: 360px;

height: 360px;

margin: 0 auto;

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

/* 告诉浏览器里面的元素进行3D转换 */

position: relative;

}

.page{

position: absolute;

left: 0;

top: 0;

width: 360px;

height: 360px;

background: #000;

color: #fff;

font-weight: bold;

font-size: 360px;

line-height: 360px;

text-align: center;

}

#page1{

-webkit-transform-origin:left;

-webkit-transition:-webkit-transform 1s linear;

}

#page2,#page3,#page4,#page5,#page6{

-webkit-transform-origin:left;

-webkit-transition:-webkit-transform 1s linear;

-webkit-transform:rotateY(90deg);

}

#op{

text-align: center;

margin: 40px auto;

}

var curIndex=1;//当前变量的值

function next(){

if(curIndex===6){

return;

}

var curPage=document.getElementById("page"+curIndex);

curPage.style.webkitTransform="rotateY(-90deg)";

curIndex++;

var nextPage=document.getElementById("page"+curIndex);

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

}

function prev(){

if(curIndex===1){

return;

}

var curPage=document.getElementById("page"+curIndex);

curPage.style.webkitTransform="rotateY(90deg)";

curIndex--;

var prevPage=document.getElementById("page"+curIndex);

prevPage.style.webkitTransform="rotateY(0deg)";

}

1

2

3

4

5

6

next

previous