CSS3实现3D立方体旋转效果

在网页上我们经常看到很多精美的3D特效,这篇笔记主要分享CSS3实现3D立方体旋转效果。对于CSS旋转特效基础不是很熟悉的朋友可以先阅读上一篇文章《CSS3旋转实例总结》。

CSS3实现3D立方体旋转效果

使用方法:

1、调用CSS样式:

<link rel="stylesheet" type="text/css" href="css/style.css" />

2、添加HTML代码:

将<!--效果html开始-->......<!--效果html结束-->之间的html和js代码;放在<body></body>之间。

CSS部分代码:

  1. *{margin: 0;padding: 0;}
  2. html,body{height: 100%;backgroundblack;}
  3. .wrap{
  4.       height: 100%;positionrelative;
  5.       -webkit-transform-style:preserve-3d;
  6.       -webkit-perspective:0px;
  7.       -moz-transform-style:preserve-3d;
  8.       -moz-perspective:0px;
  9.       -webkit-animation:mydhua 5s ease infinite;
  10.       -moz-animation:mydhua 5s ease infinite;
  11. }
  12. .box{width200px;height200px;positionabsolute;top: 50%;left: 50%;
  13.      margin:-100px 0 0 -100pxline-height200px;text-aligncenter;font-size48px;colorwhite;
  14.         }
  15. .box1{
  16.     -webkit-transform:rotatey(90deg) translatez(-100px);
  17.     -moz-transform:rotatey(90deg) translatez(-100px);
  18.     background: rgba(128,0,128,.5);
  19. }
  20. .box2{
  21.     -webkit-transform:rotatey(90deg) translatez(100px);
  22.     -moz-transform:rotatey(90deg) translatez(100px);
  23.     background: rgba(255,0,255,.5);
  24. }
  25. .box3{
  26.     -webkit-transform:rotatex(90deg) translatez(100px);
  27.     -moz-transform:rotatex(90deg) translatez(100px);
  28.     background: rgba(255,153,204,.5);
  29. }
  30. .box4{
  31.     -webkit-transform:rotatex(90deg) translatez(-100px);
  32.     -moz-transform:rotatex(90deg) translatez(-100px);
  33.     background: rgba(0,204,255,.5);
  34. }
  35. .box5{
  36.     -webkit-transform: translatez(-100px);
  37.     -moz-transform:translatez(-100px);
  38.     background: rgba(153,204,255,.5);
  39. }
  40. .box6{
  41.     -webkit-transform: translatez(100px);
  42.     -moz-transform:translatez(100px);
  43.     background: rgba(0,255,255,.5);
  44. }
  45. @-webkit-keyframes mydhua{
  46.     0%{-webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);-webkit-transform-origin: center center;}
  47.     100%{-webkit-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg);-webkit-transform-origin: center center; }
  48. }
  49. @-moz-keyframes mydhua{
  50.     0%{-moz-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);-webkit-transform-origin: center center;}
  51.     100%{-moz-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg); -webkit-transform-origin: center center;}
  52. }

HTML部分代码:

  1. <div class="wrap">
  2.        <div class="box1 box">1</div>
  3.         <div class="box2 box">2</div>
  4.         <div class="box3 box">3</div>
  5.         <div class="box4 box">4</div>
  6.         <div class="box5 box">5</div>
  7.         <div class="box6 box">6</div>
  8.     </div>

 

关于CSS3旋转特效总结一共分两篇,希望前端新人看过之后能够快速入门。

 

波波
你想把广告放到这里吗?

发表评论

您必须 登录 才能发表留言!