初步学习css3之3D动画

 本人是一名前端菜鸟,在css3如此火爆的时代,今天才来接触这个神秘的东西,第一次接触到的就是使用css3制作3d动画,特来写此文章,高手勿喷。

 以下是body部分

 <body>
  <div id="my3d">
    <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>&nbsp;<a href="javascript:prev()">prev</a>
</div>
</body>

以下是css部分

#my3d{

-webkit-perspective:800;
-webkit-perspective-origin:50% 50%;
overflow:hidden;

}
#pagegroup{

width:400px;

height:400px;

margin:0px auto;

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

position:relative;

}
.page{

width:360px;

height:360px;

padding:20px;

font-size:360px;

line-height:360px;

font-weight:bold;

text-align:center;

position:absolute;

color:#fff;

background-color:black;

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

}

以下是js部分

<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 curpage2=document.getElementById("page"+curIndex);
  curpage2.style.webkitTransform="rotateX(90deg)" ;
  curIndex--;
  var nextPage2=document.getElementById("page"+curIndex);
  nextPage2.style.webkitTransform="rotateX(0deg)";
}
</script>

通过以上代码便可以实现点击next键时,由动画的1到6一直3d翻转,点击prev时,便可以实现向前翻转,当然使用类似的方法也可以实现向翻书一样的翻转和像翻日历那样的翻转,就是向左翻转和向上翻转,当然本代码还有个不尽完美的地方,就是没办法实现循环翻转,因为要急着交作业,这只能等后期再开发研究

           

   

时间: 2024-11-06 02:51:56

初步学习css3之3D动画的相关文章

css3实现3D动画轮播图

这个感觉有点水,只是一个很简单的css3的3D动画,不过对于不会的人来说,应该还是蛮能唬人的吧,哈. 原理很简单,老规矩,都在注释里面,可以直接复制走代码,粘贴 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; marg

如何制作css3的3d动画——以骰子旋转为例,详解css3动画属性

首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5 6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective:用来实现一个3d的场景 写3D效果的第一步是要创建一个3D场景,即索要实现效果的模块.这里用到了 perspective 属性和 perspective-origin 属性. perspective:用来定义3d动画距离浏览器的距离,单位是(px). perspective-origin:效果渲染的视角

用css3画3d动画的思路

最近试了下CSS3动画,现在通过一个例子简单讲一讲我用css3画3d视图的思路. 任何时候敲代码前都要想清楚我要干什么,我要敲一个简单的3d旋转画册. 一. 1.首先用一个总容器包含所有的图片,设定属性perspective: 1000px,表示他距离我们屏幕1000px的距离,从二维变成了三维 2.要使用3d旋转,必先要有一个参考系使所有图片围绕他旋转,在总容器里面加一个div,添加属性transform-style: preserve-3d就可以变成参考系. 3.然后在这个div里设置动画效

【原】CSS3的3D动画 ——3D旋转之骰子样式的钟表(2)下 - 模仿智能社网页下的.md

之前看到智能社主页的那个骰子样式的钟表,最近研究了一下,虽然没有仔细看他是怎么做的,但是学了css3的动画之后想自己尝试着写一下,用到的原理可能和智能社网站的不太一样,我自己主要用到了css3和js. 程序写到一半,发现只有chrome和ff支持,而用ie11是没有效果的,然后用ie11去打开智能社网页,效果也是没有,调查了一下,应该是transform-style:preserve-3d这个样式在ie11下还不支持,使得对象无法以3d的样式呈现,至于兼容方式,自己还没有花时间研究,所以这个效果

【学】CSS3的3D动画 ——3D旋转(1)—— 妙味课堂

最近学了妙味的css3的动画,2D,3D的都有,先写一个最简单的3d翻转效果,鼠标移入div,正反面翻转效果. 注意点有: 要给正反面外面加个父级: transform-style: preserve-3d;是加在正反面的父级,使动画具有3d的效果:但是ie11并不支持preserve-3d perspective也要加在父级上,使动画具有透视效果: 要给父级也加上宽高,否则动画没有效果 <style> #box{ margin: 70px auto; width: 300px; height

【学】CSS3的3D动画 ——3D旋转之骰子样式的钟表(2)上—— 妙味课堂

这个是3D旋转的进阶版,是一个类似与骰子的正方体.这个版本只有秒数的个位数,还没有写整个钟表,下面那个版本好好想想该怎么写 这个效果需要用到transform-style: preserve-3d. 利用transform: rotateX, rotateY, rotateZ来定义物体转动轴,实现3D旋转 给一个正方体设置6个面,每个面都设置旋转基面,并且直接先朝各个方向转90度,有一个面要注意,就是和最前面的那个面的对面,不用转,但是要用transform: translateZ()来让这个面

css3 html5 3D动画练习

<!DOCTYPE html> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> div{ margin-bottom:10px; width:

css3的基础用法,新手必看哈(还有css3和jquery动画的对比)

第一步: 定义动画,名字可以各种起,就像方法名一样 1. 定义动画,名称为fadeIn @-webkit-keyframes fadeIn { 0% { opacity: 0; /*初始状态 透明度为0*/ } 50% { opacity: 0; /*中间状态 透明度为0*/ } 100% { opacity: 1; /*结尾状态 透明度为1*/ } } 方法里面还有很多写法: 如: /* 定义css方法,名字叫消失 Hides a leaf towards the very end of th

css3 transition属性实现3d动画效果

transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动画都可以用这个属性实现,只能说这个属性是在是太强大啦,本人在学习次属性之后才知道自己对css3的认识还是偏少,现在我给大家介绍并实际实现下该属性. transition字面意思是变迁.变换.过度的意思,所以transition属性也离不开这个大致意思,其中该属性中的重要属性是: transition-property:指定过度的元素; 如:transition-property:background,就是指