CSS3 3D transform變換

時間 2019-11-26

標籤 css3 css 3d transform 變換欄目 CSS 简体版

原文原文鏈接

transform的座標是須要了解的特性。html

咱們的rotateX,rotateY,rotateZ,和translateX,translateY等都是基於相同的座標系來定位的。web

3D的座標以下入所示：瀏覽器

3D transform中有下面這三個方法：動畫

rotateX( angle )
rotateY( angle )
rotateZ( angle )

理解了這三個方法，後面更難懂的perspective就好下手了，能夠說是突破口！spa

rotate旋轉的意思，rotateX旋轉X軸，rotateY旋轉Y軸，rotateZ旋轉Z軸,其中：3d

它們使用angle值做爲參數。若是是正角度，元素順時針旋轉。若是是負角度，元素逆時針旋轉。code

2. 必不可少的perspective屬性

perspective屬性的存在與否決定了你所看到的是2次元的仍是3次元的，也就是是2D transform仍是3D transform. orm

咱們看demo1:htm

<!DOCTYPE html>
<html>
<head>
<style>
#div1{
    position: relative;
    height: 150px;
    width: 150px;
    margin: 50px;
    padding:10px;
    border: 1px solid black;
    /*perspective:150;
    -webkit-perspective:150; /* Safari and Chrome */*/
}
#div2 {
    padding:50px;
    position: absolute;
    border: 1px solid black;
    background-color: yellow;
    transform: rotateX(45deg);
    -webkit-transform: rotateX(45deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div id="div1">
  <div id="div2">HELLO</div>
</div>
</body>
</html>

是否添加perspective屬性，顯示的樣式分別以下：blog

咱們要知道：

CSS3 3D transform的透視點是在瀏覽器的前方！

或者這麼理解吧：顯示器中3D效果元素的透視點在顯示器的上方（不是後面），近似就是咱們眼睛所在方位！

好比：

一個1680像素寬的顯示器中有張美女圖片，應用了3D transform，同時，該元素或該元素父輩元素設置的perspective大小爲2000像素。

則這張美女多呈現的3D效果就跟你本人在1.2個顯示器寬度的地方(1680*1.2≈2000)看到的真實效果一致！！

perspective屬性有兩種書寫形式，一種用在舞臺元素上（動畫元素們的共同父輩元素）；第二種就是用在當前動畫元素上，與transform的其餘屬性寫在一塊兒。以下代碼示例：

demo2以下：

 .container {
  display: block;
  width: 200px;
  height: 200px;
  margin-bottom: 50px;
  border: 1px solid #bbb;
}
.box {
  width: 100%;
  height: 100%;
  opacity: .75;
}

#darkred .box {
  background-color: darkred;
  transform: perspective(600px) rotateY(45deg);
}

#darkblue {
  perspective: 600px;
}
#darkblue .box {
  background-color: darkblue;
  transform: rotateY(45deg);
}
</style>
</head>
<body>
  <section id="darkred" class="container">
     <div class="box"></div>
  </section>

  <section id="darkblue" class="container">
     <div class="box"></div>
  </section>
</body>

效果圖以下：

這兩種寫法的效果存在很大的區別：

上面舞臺整個做爲透視元素，所以，顯然，咱們看到的每一個子元素的形體都是不同的；

而下面，每一個元素都有一個本身的視點，所以，顯然，由於rotateY的角度是同樣的，所以，看上去的效果也就如出一轍了！