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;

}

html中的transform属性,CSS3中transform属性相关推荐

在less中不能正常使用css3的calc属性的解决方法
在less中不能正常使用css3的calc属性的解决方法参考文章: (1)在less中不能正常使用css3的calc属性的解决方法 (2)https://www.cnblogs.com/zhaozh ...
css中会计算的属性,css3中样式计算属性calc()的使用和总结
calc的介绍在css3样式中有一个类似与函数的计算属性calc(),它主要用于指定元素的长度,无论是border.margin.pading.font-size和width等属性都可以使用calc ...
html中content属性,CSS3的content属性用法详解
Content属性应该算是使用最常用的一个css属性之一吧,比如我们创建一个聊天气泡.超链接的立体翻转特效.添加图标.都要使用到content属性,当然这个属性要结合:before和:after伪类使 ...
html中content属性,CSS3的content属性详解
CSS中主要的伪元素有四个:before/after/first-letter/first-line,在before/after伪元素选择器中,有一个content属性,能够实现页面中的内容插入. 插 ...
html的过渡属性,CSS3 transition 过渡属性
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果.通过过渡transition属性,可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果,要实现这一点,必须实现一项内容, ...
页面中的黑白滤镜css3，filter属性
在平常开发中遇到一些特殊节日的话会有一些滤镜效果,而这些效果可以使用一个css3的属性进行完成, 他就是filter属性属性值 filter: none | blur() | brightness( ...
html5中设置省略号颜色,CSS3中text-overflow实现文章标题带省略号的显示效果（代码实例）...
本文目标: 1.掌握文本带省略号的显示效果问题: 1.实现以下效果,要求使用纯DIV+CSS,不适用任何框架附加说明 1.总体宽度是500px,在页面中居中显示 2.标题字体大小是22px,其他字 ...
media在HTML中作用,详解CSS3中@media的实际使用
语法: CSS Code复制内容到剪贴板 @media : { sRules } 取值: : 指定设备名称. {sRules}: 样式表定义. 说明: 判断媒介(对象)类型来实现不同的展现.此特性让C ...
从零开始前端学习[32]:css3中新增加的一些文本属性
css3中新增加的一些文本属性 css中相关的文本属性 css3中增加的一些文本属性 direction文本显示方向多行超出文本显示省略号 text-shadow字体的阴影设置 text-strok ...

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

html中的transform属性,CSS3中transform属性相关推荐

最新文章

热门文章