CSS样式更改_2D转换

发布时间:2021-03-19 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了CSS样式更改_2D转换前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

这篇文章我们来介绍下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,0.65); /* IE 9 */

-moz-transform:matrix(1.3,0.32,0.65); /* Firefox */

-webkit-transform:matrix(1.3,0.32,0.65); /* Safari and Chrome */

-o-transform:matrix(1.3,0.32,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转换元素定义透视视图。

总结


以上是前端之家为你收集整理的CSS样式更改_2D转换全部内容,希望文章能够帮你解决CSS样式更改_2D转换所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。