CSS样式更改——2D转换
CSS样式更改——2D转换
前端皮皮
发布于 2020-11-25 06:54:27
发布于 2020-11-25 06:54:27
代码可运行
运行总次数：0
代码可运行
前言
上篇文章主要讲述了CSS样式更改中的裁剪、Z-Index、清除、改变元素的特性基础知识，这篇文章我们来介绍下CSS样式更改中2D转换的基础用法。
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转换元素定义透视视图。参考文档：W3C官方文档（CSS篇）
总结
这篇文章主要介绍了CSS样式更改篇中的2D转换基本设置，希望对大家的学习有帮助。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-10-26，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
推荐阅读
相关推荐
【一起来烧脑】一步学会CSS3体系
更多 >
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
