CSS3 转换

CSS3 转换

　　版权声明：未经博主授权，内容严禁转载　　

---

什么是转换

　　转换时使元素改变形状、尺寸和位置的一种效果。

　　可以对元素应用 2D 或 3D 转换，从而对元素进行旋转、缩放、移动或倾斜。

　　2D 转换：使元素在 X 轴和 Y 轴平面上发生变化。

　　3D 转换：元素同时还可以在 Z 轴上发生变化。

---

转换属性 - transform

　　transform 属性向元素应用 2D 或 3D 转换。

　　指定一组转换函数，取值为

　　transform：none / transform-function

　　　　- none：默认值，表示元素不进行转换。

　　　　- transform-function：表示一个会多个转换函数，中间以空格分开。

　　

案例代码

<style media="screen">
  div{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    background-color: #cccccc;
  }
  div.trans{
    /* rotate(90deg) 为旋转90，scale(0.8)刻度为0.8，变为原来的0.8倍 */
    transform: rotate(90deg) scale(0.8);
  }
</style>

<div>
  wadjl akdjl kawjd lk aj lka jklv kfl
</div>

<div class="trans">
  dv bghn ujui ku jh ygt frdex cevb tn
</div>

　　　　

---

转换的原点 - transform-origin

　　transform-origin 属性指定元素转换原点的位置。

　　默认情况下，转换原点在元素的中心。

　　　　- 或者 X 轴和 Y 轴的50%处。

　　transform-origin：数值 / 百分比 / 关键字（上下左右中间）

　　　　-  一个值：表示所有轴的位置。

　　　　-  两个值：表示 X 轴和 Y 轴。

　　　　-  三个值：表示 X 轴、Y 轴和 Z 轴。

案例代码

<style media="screen">
  div{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    background-color: #cccccc;
  }
  div.trans1{
    /* rotate(90deg) 为旋转90，scale(0.8)刻度为0.8，变为原来的0.8倍 */
    transform: rotate(45deg) scale(0.8);
  }
  div.trans2{
    /* rotate(90deg) 为旋转90，scale(0.8)刻度为0.8，变为原来的0.8倍 */
    transform: rotate(45deg) scale(0.4);
    /* 按照 右上角旋转 */
    transform-origin: right  top;
  }
</style>

<div>
  wadjl akdjl kawjd lk aj lka jklv kfl
</div>

<div class="trans1">
  dv bghn ujui ku jh ygt frdex cevb tn
</div>

<div class="trans2">
  dv bghn ujui ku jh ygt frdex cevb tn
</div>

　　　　

---

案例

　　做一个时钟，时钟秒针旋转。

案例代码

<style media="screen">
  #d1{
    width: 2px;
    height: 100px;
    border: 1px solid purple;
    background-color: purple;
    margin: auto;
    transform: rotate(0deg);
    transform-origin: bottom;
  }
</style>

<div id="d1">

</div>

<script type="text/javascript">
  var d1 =document.getElementById("d1");
  // 设置一个定时器
  var t = setInterval("drotate()",100);
  var d = 0;
  function drotate() {
    d1.style.transform = "rotate("+d+"deg)";
    d+=5;
  }
</script>

　　　　

---

2D 位移 - translate()

　　translate() 方法将元素从当前位置移动到 X 或 Y 轴坐标。

　　translate(x) 或者 translate(x,y)

　　　　可取值

　　　　　　- 数值、百分比

　　　　　　- 也可以是负值

　　　　也可以使用单向位移函数

　　　　　　- translateX(x)

　　　　　　- translateY(y)

　　　　

案例代码

<style media="screen">
  div{
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: #cccccc;
    position: absolute;
  }
  #d1{
    transform: translate(50px);
    background-color:rgba(255,0,0,0.2) ;
  }
  #d2{
    transform: translate(90px,90px);
    background-color:rgba(0,255,0,0.2) ;
  }
</style>

<div id="d0">
  <div id="d1">

  </div>
  <div id="d2">

  </div>
</div>

　　　　　　

---

案例

　　做一个元素，使其垂直居中

代码案例

<style media="screen">
  #d0{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    background-color: #cccccc;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
</style>

<div id="d0">

</div>

　　　　　　

---

2D 缩放 - scale（）

　　scale() 方法用于改变元素的尺寸。

　　　　- 根据给定的高度和宽度。

　　scale(x) 或者 scale(x,y)

　　　　- 一个参数时，第二个参数默认和第一个一样。

　　　　可取值

　　　　　　-  默认为1

　　　　　　-  缩小：0到1之间的数值。

　　　　　　-  放大：大于1的数值。

　　　　也可以使用单向缩放函数

　　　　　　-  scaleX(x)

　　　　　　-  scaleY(y)

 案例代码

<style media="screen">
  .box100{
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: #cccccc;
    margin: auto;
  }

  #d2{
    transform: scale(2);
    background-color: rgba(255, 0, 0, 0.2);
  }

  #d3{
    transform: scale(0.5);
    background-color: rgba(0, 255, 0, 0.2);
  }

</style>

<div class="box100" id="d1"></div>
<div class="box100" id="d2"></div>
<div class="box100" id="d3"></div>

　　　　

---

2D 旋转 - ratate()

　　 rotate() 方法用于旋转元素。

　　　　- 根据原点，将元素按照顺时针旋转给定的角度。

　　　　- 允许负值，元素将按逆时针旋转。

　　rotate(deg)

　　

案例代码

<style media="screen">
  .box100{
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: #cccccc;
    margin: auto;
  }

  #d2{
    transform: scale(2);
    background-color: rgba(255, 0, 0, 0.2);
    transform: rotate(45deg);
  }

  #d3{
    transform: scale(0.5);
    background-color: rgba(0, 255, 0, 0.2);
    transform: rotate(-30deg);
    transform-origin: right  top;
  }

</style>

<div class="box100" id="d1"></div>
<div class="box100" id="d2"></div>
<div class="box100" id="d3"></div>

　　　　　　

---

2D 倾斜 - skew()

　　skew() 方法用于让元素倾斜。

　　　　- 以原点位置，围绕 X 轴和 Y 轴按照一定角度倾斜。

　　　　- 可能会改变元素形状。

　　skew(x) 或者 skew(x,y) ，取值为角度。

　　也可以使用单向倾斜函数

　　　　- skewX(x)

　　　　- skewY(y)

　　　

案例代码

<style>
        .box100 {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            background-color: #cccccc;
            margin: auto;
        }

        #d1 {
            transform: skewX(45deg);
            background-color: rgba(255, 0, 0, 0.2);
            transform-origin: center;
        }

        #d2 {
            transform: skewY(45deg);
            background-color: rgba(0, 255, 0, 0.2);
            transform-origin: center;
        }
    </style>

    <div class="box100">
        <div class="box100" id="d1"></div>
    </div>

    <div class="box100">
        <div class="box100" id="d2"></div>
    </div>

　　　　　　

---

3D 转换 - perspective

perspective 属性定义 3D 元素距视图的距离，单位像素。

　　- 为元素定义 perspective 属性时，子元素会获得透视效果，而不是元素本身。

　　- 只影响 3D 转换元素。

浏览器兼容性

　　- Chrome 和 Safari 支持替代的 -webkit-perspective 属性。

案例代码

 <style>
         #container {
             position: relative;
             width: 200px;
             height: 200px;
             margin: 50px;
             padding: 10px;
             border: 1px solid black;
             perspective: 120px;
             -webkit-perspective: 120px;
         }

         #d1 {
             padding: 20px;
             position: absolute;
             border: 1px solid black;
             background-color: #cccccc;
             transform: rotate3d(1, 1, 1, 45deg);
   　　　}
</style>

<div id="container">
    <div id="d1">Lorem ipsum.</div>
</div>

　　　　　　

---

完成！