CSS样式更改_2D转换

时间: 2020-09-12阅读: 130标签: 样式

这篇文章我们来介绍下css样式更改中2D转换的基础用法。


1、元素位移translate(左边,顶边)

div{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);    /* IE 9 */
-webkit-transform: translate(50px,100px);  /* Safari and Chrome */
-o-transform: translate(50px,100px);    /* Opera */
-moz-transform: translate(50px,100px);    /* Firefox */
}


2 、元素旋转rotate(角度)

div{
transform: rotate(10deg);
-ms-transform: rotate(10deg);    /* IE 9 */
-webkit-transform: rotate(10deg);  /* Safari and Chrome */
-o-transform: rotate(10deg);    /* Opera */
-moz-transform: rotate(10deg);    /* Firefox */
}
rotate()
scale()
skew()
matrix()


3、元素缩放scale(宽度倍数,高度倍数)

div{
transform: scale(1,2);
-ms-transform: scale(1,2);  /* IE 9 */
-webkit-transform: scale(1,2);  /* Safari 和 Chrome */
-o-transform: scale(1,2);  /* Opera */
-moz-transform: scale(1,2);  /* Firefox */
}


4、元素翻转给定的角度 skew(x,y)

div{
transform: skew(13deg,21deg);
-ms-transform: skew(13deg,21deg);  /* IE 9 */
-webkit-transform: skew(13deg,21deg);  /* Safari and Chrome */
-o-transform: skew(13deg,21deg);  /* Opera */
-moz-transform: skew(13deg,21deg);  /* Firefox */
}


5、将前面所有方法进行组合matrix()

div{
transform:matrix(1.3,0.32,1.32,0.22,0.54,0.65);
-ms-transform:matrix(1.3,0.32,1.32,0.22,0.54,0.65);    /* IE 9 */
-moz-transform:matrix(1.3,0.32,1.32,0.22,0.54,0.65);  /* Firefox */
-webkit-transform:matrix(1.3,0.32,1.32,0.22,0.54,0.65);  /* Safari and Chrome */
-o-transform:matrix(1.3,0.32,1.32,0.22,0.54,0.65);    /* Opera */
}

定义6个数的矩阵


6、2D过度到3D

div{
transform:rotate(1deg);
-ms-transform:rotate(1deg);   /* IE 9 */
-moz-transform:rotate(1deg);   /* Firefox */
-webkit-transform:rotate(1deg); /* Safari 和 Chrome */
-o-transform:rotate(1deg);       /* Opera */
}
//它包含了所有的2D方法和3D方法,并且可以单个设置每一种的方法的x,y轴转向值,比如:
rotate(angle) 定义 2D 旋转,在参数中规定角度。测试
rotate3d(x,y,z,angle) 定义 3D 旋转
rotateX(angle) 定义沿着 X 轴的 3D 旋转
rotateY(angle) 定义沿着 Y 轴的 3D 旋转
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转
//其它的都是差不多的用法,不过还有一个用法不同的就是:
perspective(n)     为3D转换元素定义透视视图。
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9644

关闭

CSS设置滚动条样式

scrollbar包含scrollbar buttons和一个track。track进一步细分为track pieces和thumb。trace pieces为thumb的上半部分和半下部分。scrollbar corner为横向和竖向的交叉角区域

JS设置CSS样式的几种方式

用JS来动态设置CSS样式,常见的有以下几种:直接设置style的属性 某些情况用这个设置 !important值无效;直接设置属性(只能用于某些属性,相关样式会自动识别)

js怎么移除css样式?

在工作中,经常需要使用Javascript来改变页面元素的样式。其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的

CSS层叠样式表

层叠样式表,用来表现HTML或者XML等文件样式的计算机语言。网页表现与内容分离的样式设计语言,能够对网页中对象排版进行像素级精确控制,几乎支持所有字体字号

css 分割线样式_css实现文章分割线的多种方法总结

这篇文章整理css如何实现文章分割线的多种方式,分割线在页面中可以起到美化作用,那么就来看看使用css实现分割线样式的多种方法:单个标签实现分隔线、巧用背景色实现分隔线、inline-block实现分隔线、浮动实现分隔线、利用字符实现分隔线

使用execCommand将文字样式设置成css样式的办法

我们在使用contenteditable属性做富文本编辑器时经常会用到document.execCommand方法来处理文字的样式。但当我们要设置比如font-size,会发现这个命令只支持(1-7)这几种字体大小值

vue样式加scoped后不能覆盖组件的原有样式解决方法

为了vue页面样式模块化,不对全局造成污染,建议每个页面的style标签加上scoped,表示他的样式只属于当前的页面,父组件的样式不会泄漏到子组件中。但是scoped也会造成一些额外的负担

js中尺寸类样式

都要事件对象的配合,Tip:注意与浏览器及元素尺寸分开,鼠标类尺寸样式都是X,Y,浏览器及元素的各项尺寸时Height,Width;检测相对于浏览器的位置:event.clientX/event.clientY

css自定义checkbox样式

利用CSS3属性 appearance。该属性(强制)更改(改变)默认(原生)样式。Firefox 支持替代的 -moz-appearance 属性;Safari 和 Chrome 支持替代的 -webkit-appearance 属性;IE不支持该属性。

JavaScript自定义getStyle方法获取元素样式

由于getComputedStyle方法在IE浏览器中只兼容IE9及其以上,而IE8和它之前的浏览器则需要使用currentStyle方法来获取样式,所以我们就可以自定义一个getStyle方法来解决兼容性的问题

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!