1款运用html5和css3完成的三d立方体转动实际效果实

日期:2021-01-20 类型:科技新闻 

关键词:快速建站,网站建设系统,免费网页建站,网站免费建设,建站系统

怎样运用CSS3完成三d转换、立方体转动实际效果,本文为大伙儿共享完成思路,供大伙儿参照,实际內容以下

三d转换根据几个较为关键的特性,perspective,translateZ,preserve⑶d;
transform-style(preserve⑶d)创建三d室内空间
perspective视镜
perspective-origin视镜基点
x:left/center/right/length/%
y:top/center/bottom/length/%
transform新增涵数
rotateX():假如值为恰逢,元素紧紧围绕X轴顺时针转动;反之,假如值为负值,元素紧紧围绕X轴逆时针转动。
rotateY():假如值为恰逢,元素紧紧围绕Y轴顺时针转动;反之,假如值为负值,元素紧紧围绕Y轴逆时针转动。
rotateZ():rotateZ()涵数特定元素紧紧围绕Z轴转动,假如仅从视觉效果角度上看,rotateZ()涵数让元素顺时针或逆时针转动,而且实际效果和rotate()实际效果等同于,
translateZ();让元素在Z轴开展位移,当其值越大时,元素离收看者越近,视觉效果上元素变大,反之元素变小。
scaleZ(),scaleZ()在独立应用时,沒有任何实际效果,必须相互配合其它的形变涵数1起应用才会合理果。
transform-orign:转动的标准点
x:left/center/right/length/%
y:top/center/bottom/length//%
z:length

**三d位移:**CSS3中的三d位移关键包含translateZ()和translate3d()两个作用涵数;
**三d转动:**CSS3中的三d转动关键包含rotateX()、rotateY()、rotateZ()和rotate3d()4个作用涵数;
**三d放缩:**CSS3中的三d放缩关键包含scaleZ()和scale3d()两个作用涵数;
**三d引流矩阵:**CSS3中三d形变中合2D形变1样也是有1个三d引流矩阵作用涵数matrix3d()

文件格式:
舞台(perspective)
器皿(三d, preserve⑶d)
內容

三d完成立方体盒子:

第1步:先合理布局好div的部位。

第2步:对每一个平面转动。转动以前的提前准备工作中:
给舞台再加视镜,perspective(设为800px到1200px之间)
给器皿再加三d实际效果;transform-style:preserve⑶d;
上面和下面绕着X轴转动。左边和右面绕着Y轴转动,前面在Z轴上挪动。转动时,要设定转动的标准点,上面下列边为转动标准,转动90deg,下面以上边为转动基点,转动90deg,左边以右侧为转动基点,转动90deg,右侧以左侧做为转动基点,转动90deg.随后将前面沿着Z轴方位平移。
假如将视镜加给器皿,在器皿转动时,便可以看到出现异常,假如不给器皿再加transform-style:preserve⑶d;那末转动时,就只看到平面在转动

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  5.     <title>Title</title>  
  6.     <style>  
  7.         .stage{perspective: 800px;}   
  8.         .container{width: 150px;height:150px;margin: 200px auto; position: relative;   
  9.             transform-style: preserve⑶d;height:200px;transition:5s;transform-origin: center center 75px;}   
  10.         .container .side{position: absolute;width: 150px;height: 150px;border:2px solid #0033FF;text-align: center;line-height: 150px;}   
  11.         .left{left:⑴52px;transform: rotateY(90deg);transform-origin: right;}   
  12.         .right{left:152px;transform: rotateY(⑼0deg);transform-origin: left;}   
  13.         .top{top:⑴52px;transform: rotateX(⑼0deg);transform-origin: bottom;}   
  14.         .bottom{top:152px;transform: rotateX(90deg);transform-origin: top;}   
  15.         .front{transform: translateZ(152px);z-index:2;}   
  16.         .back{z-index:1;}   
  17.         .container:hover{transform: rotateY(360deg)}   
  18.     </style>  
  19. </head>  
  20. <body>  
  21.     <div class="stage">  
  22.         <div class="container">  
  23.             <div class="side front"></div>  
  24.             <div class="side back"></div>  
  25.             <div class="side left"></div>  
  26.             <div class="side right"></div>  
  27.             <div class="side top"></div>  
  28.             <div class="side bottom"></div>  
  29.         </div>  
  30.     </div>  
  31. </body>  
  32. </html>  

第3步:完成三d立方体的转动

给器皿设定转动管理中心,我设定的是盒子的正管理中心开展转动。这样1个三d立方体的转动实际效果就进行了。

以便更好的展现,大家能够将每一个面换为是1张照片。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  5.     <title>Title</title>  
  6.     <style>  
  7.         .stage{perspective: 800px;}   
  8.         .container{width: 150px;height:150px;margin: 200px auto; position: relative;   
  9.             height:200px;transition:5s;transform-origin: center center 75px;transform-style: preserve⑶d;backface-visibility: hidden;}   
  10.         .container .side{position: absolute;width: 150px;height: 150px;border:2px solid #0033FF;text-align: center;line-height: 150px;}   
  11.         .left{left:⑴52px;transform: rotateY(90deg);transform-origin: right;background: url(../images/photo5.jpg);background-size:100% 100%;}   
  12.         .right{left:152px;transform: rotateY(⑼0deg);transform-origin: left;background: url(../images/photo4.jpg);background-size:100% 100%;}   
  13.         .top{top:⑴52px;transform: rotateX(⑼0deg);transform-origin: bottom;background: url(../images/photo3.jpg);background-size:100% 100%;}   
  14.         .bottom{top:152px;transform: rotateX(90deg);transform-origin: top;background: url(../images/photo2.jpg);background-size:100% 100%;}   
  15.         .front{transform: translateZ(152px);z-index:2;background: url(../images/photo1.jpg);background-size:100% 100%;}   
  16.         .back{z-index:1;background: url(../images/photo.jpg);background-size:100% 100%;}   
  17.         .container:hover{transform: rotateY(360deg)}   
  18.     </style>  
  19. </head>  
  20. <body>  
  21. <div class="stage">  
  22.     <div class="container">  
  23.         <div class="side front"></div>  
  24.         <div class="side back"></div>  
  25.         <div class="side left"></div>  
  26.         <div class="side right"></div>  
  27.         <div class="side top"></div>  
  28.         <div class="side bottom"></div>  
  29.     </div>  
  30. </div>  
  31. </body>  
  32. </html>  

可是这个在转动时,有1个难题,不应该看到的平面也会被看到:

相反,假如根据另外一种方法来完成,则不容易有这个难题。不改动器皿的转动管理中心,根据将后边,左右上下面沿着Z轴向后平移宽度的1般,随后再将前朝向前挪动宽度的1般,那末转动管理中心便是盒子的管理中心。
以下:

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  5.     <title>Title</title>  
  6.     <style>  
  7.         .stage{perspective: 800px;}   
  8.         .container{width: 150px;height:150px;margin: 200px auto; position: relative;   
  9.             transform-style: preserve⑶d;height:200px;transition:5s;}   
  10.         .container .side{position: absolute;width: 150px;height: 150px;border:2px solid #0033FF;text-align: center;line-height: 150px;}   
  11.         .left{left:⑴52px;transform: translateZ(⑺5px) rotateY(90deg);transform-origin: right;background: url(../images/photo5.jpg);background-size:100% 100%;}   
  12.         .right{left:152px;transform: translateZ(⑺5px) rotateY(⑼0deg);transform-origin: left;background: url(../images/photo4.jpg);background-size:100% 100%;}   
  13.         .top{top:⑴52px;transform: translateZ(⑺5px) rotateX(⑼0deg);transform-origin: bottom;background: url(../images/photo3.jpg);background-size:100% 100%;}   
  14.         .bottom{top:152px;transform:translateZ(⑺5px)  rotateX(90deg);transform-origin: top;background: url(../images/photo2.jpg);background-size:100% 100%;}   
  15.         .back{transform:translateZ(⑺5px);z-index:1; background: url(../images/photo2.jpg);background-size:100% 100%;}   
  16.         .front{z-index:2;transform:translateZ(75px);background: url(../images/photo.jpg);background-size:100% 100%;}   
  17.         .container:hover{transform: translateZ(⑺5px) rotateY(360deg);}   
  18.     </style>  
  19. </head>  
  20. <body>  
  21. <div class="stage">  
  22.     <div class="container">  
  23.         <div class="side front"></div>  
  24.         <div class="side back"></div>  
  25.         <div class="side left"></div>  
  26.         <div class="side right"></div>  
  27.         <div class="side top"></div>  
  28.         <div class="side bottom"></div>  
  29.     </div>  
  30. </div>  
  31. </body>  
  32. </html>  
  33.   

在转动全过程中,1切一切正常:

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助。

原文详细地址:http://blog.csdn.net/liuyan19891230/article/details/51233866