一篇文章搞定css3 3d效果

時間  2019-11-26
標籤 一篇 文章 搞定 css3 css 3d 效果 欄目 CSS 简体版
原文   原文鏈接

css3 3d學習心得

經過這個圖片應該清楚的瞭解到了x軸 y軸 z軸是什麼概念了。css

首先先給你們看一個小例子：
卡片反轉

這個例子只是簡單的純css3 3d 關於y軸旋轉 下面是代碼：html

這是HTML：
<body style="background-color:#23d19d">
  <div id="box">
    <div class="bian zhi1"><img src="imags/kpxz1.jpg" alt=""></div>
    <div class="bian zhi2"><img src="imags/kpxz2.jpg" alt=""></div>
  </div>
</body>
這是css：
body{
  perspective: 800px;
  transform-style: preserve-3d;
}
#box{
  width: 300px;
  height: 300px;
  margin: 0 auto;
  transform-style: preserve-3d;
  position: relative;//相對body定位
  transition: 2s;//運動時間
}
#box:hover{
  transform:rotateY(180deg);//當鼠標移動到上面時讓他旋轉180°
}
#box .bian{
  width: 300px;
  height: 300px;
  text-align: center;
  line-height: 300px;
  font-size: 100px;
  position: absolute; //.mian相對與#box絕對定位
}
.zhi1{
  background-color: red;
    transform:rotateY(180deg);
}
.zhi2{
    background-color: yellow;
    backface-visibility: hidden;//設置後面的可適度爲看不見
}
精彩的代碼已經看完了那就聊聊原理吧！

css3 3d 顧名思義是由兩個2d名片組成的 但不是讓你創建連個2d啊！java

  • 一個div要想又3d效果那就得在最外層創建一個3d平面.css3

  • transform-style: preserve-3d; 3d空間web

  • perspective: 800px; 它被成爲視距或者緊身.dom

  • 可是要是相對與body是否是也得給div上一層也得加一個緊身呢！學習

  • 有了3d效果是否是的有一個像眼鏡同樣的東西呢 在不一樣的地方顯示的效果也是不同的url

  • perspective-origin:50% 50%; 這就是你的眼鏡啦 位置不一樣效果也就不用了3d

  • 這樣咱們的3d空間就已經創建成了。

3d無非就是經過X Y Z軸來進行操做

rotateX/rotateY/rotateZ能夠幫助理解三維座標

translateZ則能夠幫你理解透視位置。

transform-origin咱們成爲基點 在水平方向改變觀看div的位置

scale 縮放 rotate 旋轉 translate移動 skew傾斜 經過這些來進行3d效果

我相信你們已經初步瞭解了css3 3d了
魔方

那如今咱們再來看一個例子吧！

這是一個正方體也是純css3 來編寫的

首先先讓六個面所有疊加在一塊兒 經過本身對3d空間的理解 和 x y z 軸的移動來拼接這個立方體

這是HTML：
<body style="background-color:#23d19d">
  <div id="box">
    <div class="mofang_box"id="mofang_box">
      <div class="mofang qian"><img src="imags/1.jpg"></div>
      <div class="mofang hou"><img src="imags/2.jpg"></div>
      <div class="mofang left"><img src="imags/3.jpg"></div>
      <div class="mofang right"><img src="imags/4.jpg"></div>
      <div class="mofang top"><img src="imags/5.jpg"></div>
      <div class="mofang buttom"><img src="imags/6.jpg"></div>
    </div>
  </div>
  <script type="text/javascript"src="js/index02.js"></script>
</body>
這是css：
img{
  width: 200px;
  height: 200px;
}
#box{
  perspective: 800px;
  transform-style: preserve-3d;
  transition:  5s infinite;
  transform:rotateX(0deg) rotateY(0deg);
}
.mofang_box{
  width: 200px;
  height: 200px;
  margin: 100PX auto;
  position: relative;
  transform-style: preserve-3d;
  transition: 50s;
  transform:rotateX(0deg)rotateY(0deg);
}
.mofang_box:hover{
  transform:rotateX(3600deg)rotateY(3600deg);
}
.mofang{
  width: 200px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  position: absolute;

}
//原來這六個面的div是疊加在一塊兒的經過旋轉 移動來讓他們造成正方體
.left{
  transform:rotateY(90deg)translateZ(-100px);
}
.right{
  transform:rotateY(90deg)translateZ(100px);
}
.top{
  transform:rotateX(90deg)translateZ(100px)rotateZ(360deg);
}
.buttom{
  transform:rotateX(90deg)translateZ(-100px)rotateZ(180deg);
}
.hou{
  transform:rotateX(0deg)translateZ(-100px)rotateZ(180deg);
}
.qian{
  transform:rotateX(0deg)translateZ(100px);
}

這個例子就很少說了 下面這個是很是炫 並且常常用的banner圖：

banner圖

這個案例簡單的說就是前面作的魔方，用5個魔方拼接起來讓他在視覺上成爲一體 再給每一個魔方設置一個延遲時間 第一個相對第二個延遲 第二個相對第三個延遲 這樣一次類推就會有這樣的效果了
這是最重要的就是圖片的定位 每個div上顯示的都是圖片的一部分 咱們須要來規定它的位置

.wutai:nth-of-type(2)>.mofang{
  background-position:-100px 0px;
}
.wutai:nth-of-type(3)>.mofang{
  background-position:-200px 0px;
}
.wutai:nth-of-type(4)>.mofang{
  background-position:-300px 0px;
}
.wutai:nth-of-type(5)>.mofang{
  background-position:-400px 0px;
}
.wutai:nth-of-type(6)>.mofang{
  background-position:-500px 0px;
}

他就是規定圖片的位置

這是HTML：
<body style="background-color:#23d19d">
  <div id="box"></div>
</body>
這是css;

css裏邊有-webkit-都是兼容ie的寫法；

img{
  width: 100px;
  height: 200px;
}
#box{
  -webkit-perspective: 800px;
          perspective: 800px;
  -webkit-perspective-origin: 50% 50%;
          perspective-origin: 30% 50%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: 5s infinite;
  transition:  5s;
  margin:100px 415px;
}
.wutai{
  width: 100px;
  height: 200px;
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  float: left;
  margin-left: -2px;

}
.mofang{
  width: 100px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  position: absolute;
}
.left{
  width: 200px;
  height: 200px;
  -webkit-transform:rotateY(90deg)translateZ(-100px);
          transform:rotateY(90deg)translateZ(-100px);
  background-color: #000;
}
.right{
  width: 200px;
  height: 200px;
  background-color: #000;
  -webkit-transform:rotateY(90deg)translateZ(0px);
          transform:rotateY(90deg)translateZ(0px);
}
//.wutai:nth-of-type(2)>.mofang這樣的很重要  他是改變圖片大小的
//這個banner是把5個div拼接起來的因此要改變圖片的大小和位置
.wutai:nth-of-type(2)>.mofang{
  background-position:-100px 0px;
}
.wutai:nth-of-type(3)>.mofang{
  background-position:-200px 0px;
}
.wutai:nth-of-type(4)>.mofang{
  background-position:-300px 0px;
}
.wutai:nth-of-type(5)>.mofang{
  background-position:-400px 0px;
}
.wutai:nth-of-type(6)>.mofang{
  background-position:-500px 0px;
}
.top{
  background-image:url(../imags/8.jpg);
  -webkit-transform:rotateX(90deg)translateZ(100px)rotateZ(360deg);
          transform:rotateX(90deg)translateZ(100px)rotateZ(360deg);
  background-size: 500px 100%;//設置圖片大小爲500px
}
.buttom{
  background-image:url(../imags/9.jpg);
  -webkit-transform:rotateX(90deg)rotateX(180deg)translateZ(100px);
          transform:rotateX(90deg)rotateX(180deg)translateZ(100px);
  background-size: 500px 100%;//設置圖片大小爲500px
}
.hou{
  background-image:url(../imags/10.jpg);
  -webkit-transform:rotateX(180deg)translateZ(100px);
          transform:rotateX(180deg)translateZ(100px);
  background-size: 500px 100%;//設置圖片大小爲500px
}
.qian{
  background-image:url(../imags/11.jpg);
  -webkit-transform:rotateX(0deg)translateZ(100px);
          transform:rotateX(0deg)translateZ(100px);
  background-size: 500px 100%;//設置圖片大小爲500px
}
這是js;
window.onload=function(){
  var box=document.getElementById("box");
  var wutai =box.getElementsByClassName("wutai");
  var gs=5;//遍歷的div
  var neirong= '<div class="wutai"><div class="mofang qian"></div><div class="mofang hou"></div><div class="mofang left"></div><div class="mofang right"></div><div class="mofang top"></div><div class="mofang buttom"></div></div>';    //遍歷的HTML
  var dom="";
  for(var i=0;i<gs;i++){
    dom+=neirong;//循環遍歷div的個數
  }
  box.innerHTML=dom;// 將遍歷的div放入html中
  var dian=0;
  box.onclick=function(){
    dian++;
    var jiaodu=dian*90;
    for(var i=0;i<gs;i++){
      wutai[i].style="transition:transform 1s"+100*i+"ms;transform:rotateX("+jiaodu+"deg)";//設置延遲時間和旋轉的度數
      }
  }
  setInterval(function(){
    dian++;
    var jiaodu=dian*90;
    for(var i=0;i<gs;i++){
      wutai[i].style="transition:transform 1s"+100*i+"ms;transform:rotateX("+jiaodu+"deg)";
      }
  },3000)//設置計時器讓dome本身運動起來
}

最後給你們一個總結吧！

3d世界中的各類有規律的運動效果均可以使用CSS3 transform 3D方法實現咱們怎麼想就怎麼作 3d的世界很是奇妙也很是神奇

做者：常樂

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程