码迷,mamicode.com
首页 > Web开辟 > 详细

CSS3 transform属性

时间:2018-01-02 19:52:44      浏览:1344      评论:0      收藏:0      [点我收藏+]

标签:直接   http   add   检查   示例   use   操作   opera   更改   

在简介有关transform相干的知识之前,先来讲一下transform-origin的用法和关于<angle>角度的几种取值单位。别的,在应用时,为了兼容各个浏览器,可加上浏览器的私有前缀[-moz- -webkit -ms-]。

transform-origin

设置对象变换的原点,平日和rotate改变、scale缩放、skew斜切等一路应用,IE9+

2D情况下:默许值 50% 50%,即center center

3D情况下:默许值 50% 50% 0

取值简介:

  1. X轴:left|center|right|length|%
  2. Y轴:top|center|bottom|length|%
  3. Z轴:length

留意:假设只设置一个值,则该值感化于横坐标,纵坐标默许50%,Z轴默许为0,别的百分比是相关于本身停止计算的。

如:

{
  transform: rotate(45deg);
  transform-origin: 0 0;
  -ms-transform: rotate(45deg);     /* IE 9 */
  -ms-transform-origin: 0 0;          
  -moz-transform: rotate(45deg);    /* Firefox */
  -moz-transform-origin: 0 0; 
  -webkit-transform: rotate(45deg); /* Safari Opera and Chrome */ 
  -webkit-transform-origin: 0 0;
}

 

后果图:

技巧分享图片

角度的单位

CSS3新增,角度单位有四种,在一切可应用角度的处所都可应用这四种单位,然则须要留意兼容性,除turn单位外其他单位都可兼容IE9+浏览器版本。

单位解释:

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

单位解释
deg度数,一个圆共360度,IE9+
grad梯度,一个圆共400梯度,IE9+
rad弧度,一个圆共2n弧度,IE9+
turn转、圈,一个圆共1转,IE+ FireFox13.0+

transform

变换,可对元素停止位移、改变、缩放、倾斜操作,支撑2D或许3D转换,IE9+支撑。

目次

  • translate 位移
  • rotate 改变
  • scale 缩放
  • skew 斜切
  • 变换综合应用

translate 位移

对象停止2D空间或3D空间的位移。 应用规矩:

translate(): 第一个参数指定X轴的位移量[必须], 第二个参数指定Y轴的位移量[当不设置时, 默许为0];
translateX(): 指定X轴的位移;
translateY(): 指定Y轴的位移;
translate3D(): 第一个参数指定X轴的位移量, 第二个参数指定Y轴的位移量, 第三个参数指定Z轴的位移量, 3个参数缺一弗成;
translateZ(): 指定Z轴的位移;

 

应用translate时须要留意位移量的百分比是相对元素本身宽高来计算的。

translate有一个最罕见的应用,即当元素宽度高度不固准时,应用translate可完成程度和垂直偏向的居中。

代码示例:

    dom构造
 <div class="box">
        <div class="item">center</div>
    </div>


    款式设计
 .box{
        position: relative;
        width: 300px;
        height: 300px;
        border: 1px solid;
    }
    .item{
        position: absolute;
        padding: 50px;
        background-color: #fb3;
        top: 50%; /*相关于父级*/
        left: 50%;

        transform: translate(-50%, -50%); /*相对本身*/

        -ms-transform: translate(-50%, -50%); 
        -moz-transform: translate(-50%, -50%); 
        -webkit-transform: translate(-50%, -50%); 
    }

 

后果图:

技巧分享图片

rotate 改变

对象停止2D空间或3D空间改变。常与 transform-origin 一路应用。

应用规矩:

rotate(): 2D改变,根据指定的改变角度停止改变;
rotate3D(): 3D改变,必须指定四个参数,前3个参数分别表示改变的偏向x y z, 第4个参数表示改变的角度;
rotateX(): 指定X轴的改变角度;
rotateY(): 指定Y轴的改变角度;
rotateZ(): 指定Z轴的改变角度;

 

应用rotate时须要留意以下几点:

  1. 改变角度必须有单位,不然将报错。
  2. rotate值为正值时,顺时针改变;不然逆时针改变。
  3. 在2D情况下,rotate()只能指定一个参数;在3D情况下,rotate3D()必须指定四个参数,不然将报错。

改变45度,代码示例:

 /* X轴改变45度 */
    .item1{
        transform: rotateX(-45deg);

        -moz-transform: rotateX(-45deg);
        -ms-transform: rotateX(-45deg);
        -webkit-transform: rotateX(-45deg);
    }

    /* Y轴改变45度 */
    .item2{
        transform: rotateY(-45deg);

        -moz-transform: rotateY(-45deg);
        -ms-transform: rotateY(-45deg);
        -webkit-transform: rotateY(-45deg);
    }

    /* Z轴改变45度 */    
    .item3{
        transform: rotateZ(-45deg);

        -moz-transform: rotateZ(-45deg);
        -ms-transform: rotateZ(-45deg);
        -webkit-transform: rotateZ(-45deg);
    }

 

示例图:

技巧分享图片技巧分享图片技巧分享图片

上述例子中的 rotateZ(-45deg);也能够写成 rotate3D(0,0,1,-45deg);,固然相关于X轴、Y轴的也可应用rotate3d的简写情势。

别的,不好看出只指定Z轴的改变与2D改变的后果分歧。即以下三种写法取得的改变后果是一样的:

transform: rotate(-45deg);

transform: rotate3D(0,0,1,-45deg);

transform: rotateZ(-45deg);

 

scale 缩放

对象停止2D空间或3D空间缩放。常与 transform-origin 一路应用。

应用规矩:

scale(): 第一个参数指定X轴的缩放倍数[必须], 第二个参数指定Y轴的缩放倍数[当不设置时, 默许取第一个参数的值];;
scaleX(): 指定X轴的缩放倍数;
scaleY(): 指定Y轴的缩放倍数;
scale3D(): 第一个参数指定X轴的缩放倍数, 第二个参数指定Y轴的缩放倍数, 第三个参数指定Z轴的缩放倍数, 3个参数缺一弗成;
scaleZ(): 指定Z轴的缩放倍数;

 

应用scale时须要留意以下几点:

  1. 参数值为倍数,如:scale(2); 表示缩小年夜2倍。
  2. 参数值是分别相对元素的宽和高停止计算的。即就是scale只设置了一个值,那也是分别计算的。
  3. 参数值大年夜于1表示缩小年夜;0~1之间为减少;1表示不便;0的时辰元素弗成见。
  4. 参数值为正数时,除元素的偏向产生改变[x轴反转],其他规律与正值分歧。

负值的情况,代码示例:

    dom构造
 <div class="box">
        <div class="item">Item</div>
    </div>

 



    款式设计
 .box{
        width: 300px;
        height: 300px;
        border: 1px solid;
    }
    .item{
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background-color: #fb3;

        transform: scale(-1.2);

        -ms-transform: scale(-1.2);
        -moz-transform: scale(-1.2);
        -webkit-transform: scale(-1.2);
    }

 

后果图:

技巧分享图片

图中可看出,元素相关于x轴产生了反转,然则缩放后果并没有受影响。

skew 斜切

对象停止2D空间斜切。常与 transform-origin 一路应用。

应用规矩:

skew(): 第一个参数对应X轴[必须], 第二个参数对应Y轴[当不设置时, 默许为0];;
skewX(): 指定X轴的斜切;
skewY(): 指定Y轴的斜切;

综合应用

  • 平行四边形
  • 梯形
  • 菱形
  • 折角

平行四边形

道理:应用skew斜切来完成。

先看后果图:

技巧分享图片

看到后果图,最早想到的是对元素应用skew斜切后果。

简单应用斜切代码:

    dom构造:
<div class="btn">Home</div>

 



    款式设计:
.btn{
        width: 150px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background-color: #fb3;

        transform: skew(-45deg);

        -moz-transform: skew(-45deg);
        -ms-transform: skew(-45deg);
        -webkit-transform: skew(-45deg);
    }

 

确切完成了平行四边形的后果,然则外面的内容也被斜切了,其实不完美。

技巧分享图片

下面简介两种偏历来完成平行四边形,且内容不会受影响。

第一种是比较罕见的,嵌套一层构造,父元素停止斜切,子元素抵消掉落斜切。

代码:

    dom构造:
  <div class=".box">
        <div class="btn">home</div> 
    </div>

 



    款式设计:
.box{
        width: 150px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background-color: #fb3;

        transform: skew(-45deg);

        -moz-transform: skew(-45deg);
        -ms-transform: skew(-45deg);
        -webkit-transform: skew(-45deg);
    }
    .btn{
        transform: skew(45deg);

        -moz-transform: skew(45deg);
        -ms-transform: skew(45deg);
        -webkit-transform: skew(45deg); 
    }

 

第二种办法是应用伪元素,将斜切背景应用在伪元素上。

代码:

    dom构造:
<div class="btn">home</div> 

 



    款式设计:
 .btn{
        position: relative;
        width: 150px;
        height: 40px;
        text-align: center;
        line-height: 40px;
    }
    .btn:after{
        position:absolute;
        content: ‘‘;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: #fb3;

        z-index: -1; /* 包管背景不会覆盖住文字 */

        transform: skew(-45deg);

        -moz-transform: skew(-45deg);
        -ms-transform: skew(-45deg);
        -webkit-transform: skew(-45deg); 
    }

 

梯形

梯形的完成相对平行四边形来讲要复杂一些,须要借助perspective()透视来完成。

先看后果图:

技巧分享图片

代码:

    dom构造:
<div class="box">home</div>

 



    根本款式
.box {
        position: relative;
        width: 200px;
        height: 60px;
        margin: 50px;
        line-height: 60px;
        text-align: center;
    }

 

下面来解释一下若何完成梯形后果:

战争行四边形的道理一样,梯形的背景仍要写在伪元素上,以防止字体变形。

代码以下:

 .box:after {
        position: absolute;
        content: ‘‘;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        background-color: #fb3;
        transform: perspective(20px) rotatex(5deg);

        -moz-transform: perspective(20px) rotatex(5deg);
        -ms-transform: perspective(20px) rotatex(5deg);
        -webkit-transform: perspective(20px) rotatex(5deg);
    }  

 

为更好的检查后果,可以给box加上半透明的背景,后果图:

技巧分享图片

改变是以元素的中间线停止改变的,所以要修改一下改变原点,增长以下代码:

 transform-origin: bottom;
    -moz-transform-origin: bottom;
    -ms-transform-origin: bottom;
    -webkit-transform-origin: bottom;

 

在看后果图:

技巧分享图片

这时候可以发明,元素的高度曾经严重缩水了,这时候辰可以应用scale停止y轴的缩放,修改transform代码以下:

    transform: perspective(20px) rotatex(5deg) scaley(1.3);
    -moz-transform-origin: perspective(20px) rotatex(5deg) scaley(1.3);
    -ms-transform-origin: perspective(20px) rotatex(5deg) scaley(1.3);
    -webkit-transform-origin: perspective(20px) rotatex(5deg) scaley(1.3);

后果:

技巧分享图片

固然也能够应用修改transform-origin的值完成不合的梯形。

技巧分享图片

代码以下[别忘记兼容性,加上浏览器前缀]:

    右边直角
    transform-origin: right;
    transform: perspective(20px) rotatex(5deg);

    左边直角
    transform-origin: left;
    transform: perspective(20px) rotatex(5deg);

菱形

菱形的完成有两种,第一种是有rotate结合scale完成,第二种是用clip-path完成。

起首对父级停止改变 代码:

    dom构造
    <div class="box">
        <img src="">
    </div>

    根本款式设计:
 .box{
        width: 200px;
        height: 200px;
        border: 1px solid;
        overflow: hidden;

        transform: rotate(45deg);
        -mos-transform: rotate(45deg);
        -mz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }
    .box img{
        width: 100%;
    }

 

后果图:

技巧分享图片

如今可以加上scale属性了,更改transform属性为:

    transform: rotate(-45deg) scale(1.41);

技巧分享图片

然则这个办法无限制,每次必须要计算scale缩小年夜的比例,并且当图片不是正方形时,就没办法完成较好的菱形后果。

第二种筹划,应用clip-path完成。不须要嵌套任何元素。

    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);

后果图:

技巧分享图片

折角后果

假设是规矩的折角图案,以下图所示,可直接用background完成,概略可见文章背景应用

技巧分享图片

[代码就不过量说清楚明了]代码示例:

    dom构造
    <div class="box"></div>

    根本款式
    .box {
        width: 200px;
        height: 200px;
        background-color: #58a; /*hack 回退*/
        background: linear-gradient(225deg, transparent 20px, rgba(0, 0, 0, .7) 0), linear-gradient(225deg, transparent 20px, yellowgreen 0);
        background-size: 28px, 100%;
        background-repeat: no-repeat;
        background-position: right top, center;
    }

不合角度的折角完成:

后果图:

技巧分享图片

代码:

    .box{
        position: relative;
        background-color: #58a; /*hack 回退*/
        background: linear-gradient(-150deg, transparent 30px, yellowgreen 0);
    }

    .box:before {
        position: absolute;
        content: ‘‘;
        width: 62px;
        height: 34px;
        top: 0;
        right: 0;
        background: linear-gradient(-30deg, transparent 30px, rgba(0, 0, 0, .7) 0);
        transform: rotate(-120deg); 
   }

仍须要借助突变色完成背景,然后改变。

也能够停止更多的优化,如暗影,圆角,后果图以下:

技巧分享图片

CSS3 transform属性

标签:直接   http   add   检查   示例   use   操作   opera   更改   

原文地址:https://www.cnblogs.com/minghui007/p/8178423.html

(0)
(0)
   
告发
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权一切 京ICP备13008772号-2
迷上了代码!