html中的transform属性,CSS3中transform属性

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

一.Transform描述：

ransform是变形,改变的意思。在CSS3中transform主要包括以下几种：旋转rotate，扭曲skew,缩放scale和移动translate以及矩阵变形matrix。transform的作用也是改变，让元素倾斜，旋转，缩放，位移。

二.Transform语法：

transform: rotate | scale | skew | translate |matrix;

三.Transform子属性详解：

1.transform:rotate(); 元素旋转

value(值)为旋转度数(deg)，默认顺时针旋转。value若为负值则逆时针旋转。

使用如下：.box{

width:100px;height:100px;margin:20px auto;background-color:#75C934;

text-align:center;line-height:100px;font-size:18px;

/*过渡效果*/

-webkit-transition: transform 0.8s;

}

.box:hover{

/*旋转80°*/

transform:rotate(80deg);

}

2.transform:skew();元素倾斜

value(值)为倾斜度数，value只有一个值，横向默认向左倾斜；有两个值，第二个值纵向默认向上倾斜。value若为负值则反方向倾斜。

使用如下：.box{

width:100px;height:100px;margin:20px auto;background-color:#75C934;

text-align:center;line-height:100px;font-size:18px;

-webkit-transition: transform 0.8s,border-radius 0.8s;

border-radius:30px;

}

.box:hover{

transform:skew(20deg,20deg);

border-radius:0px;

}

3.transform:scale();元素缩放

value(值)为缩放倍数。value只有一个值，默认整体缩放；有两个值，第一个值横向缩放，第二个值纵向缩放。value值大于1放大，小于1大于0缩小，负值则反向缩放(元素呈镜像)

使用如下：.box{

-webkit-transition: transform 0.8s,border-radius 0.8s;

}

.box:hover{

transform:scale(2,0.8);

border-radius:40px;

}

4.transform:translate();元素位移

value(值)为位移像素，value只有一个值，横向默认向右移动；有两个值，第二个值纵向默认向下移动。value若为负值则反方向移动。

使用如下：.box{

-webkit-transition: transform 0.3s,box-shadow 0.3s;

}

.box:hover{

transform:translate(-3px,-3px);

box-shadow:3px 3px 5px 0px #000;

}