zoukankan      html  css  js  c++  java
  • 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>

          


     完成!

  • 相关阅读:
    LVM
    Linux 压缩归档
    <基础> PHP 字符串操作
    <基础> PHP 数组操作
    PHP 文件操作类(转载)
    Linux 磁盘管理(分区、创建文件系统、挂载)
    文件系统(File System)
    Linux 硬链接、软链接
    Django基础一
    数据库约束
  • 原文地址:https://www.cnblogs.com/wjw1014/p/8970924.html
Copyright © 2011-2022 走看看