transform旋转变换效果

简介: div{  transform:rotate(7deg);  -ms-transform:rotate(7deg); /* IE 9 */  -moz-transform:rotate(7deg); /* Firefox */  -webkit-transform:rotate(7deg); /* Safari 和 Chrome */  -o-transform:rotate(7deg); /* Opera */} 语法: transform: none|transform-functions; none 定义不进行转换。

div
{
  transform:rotate(7deg);
  -ms-transform:rotate(7deg); /* IE 9 */
  -moz-transform:rotate(7deg); /* Firefox */
  -webkit-transform:rotate(7deg); /* Safari 和 Chrome */
  -o-transform:rotate(7deg); /* Opera */
}

语法: transform: none|transform-functions;

none 定义不进行转换。 测试
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。 测试
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。 测试
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换,只是用 X 轴的值。 测试
translateY(y) 定义转换,只是用 Y 轴的值。 测试
translateZ(z) 定义 3D 转换,只是用 Z 轴的值。
scale(x,y) 定义 2D 缩放转换。 测试
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。 测试
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。 测试
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转,在参数中规定角度。 测试
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。 测试
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。 测试
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。 测试
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。 测试
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。 测试
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。 测试
perspective(n) 为 3D 转换元素定义透视视图。 测试

目录
相关文章
|
28天前
认识transform
【8月更文挑战第24天】认识transform。
62 1
|
3月前
|
前端开发 开发者
CSS进阶-2D变换:translate, rotate, scale
【6月更文挑战第15天】CSS 2D变换如`translate`、`rotate`和`scale`赋予了网页设计灵活性,无需改动HTML即可实现元素移动、旋转和缩放。本文详解这三个属性,讨论使用中的问题和解决方案,并提供代码示例。例如,`translate(50px, 100px)`平移元素,`rotate(45deg)`顺时针旋转45度,`scale(1.5, 1)`水平放大1.5倍。理解百分比、旋转中心和缩放影响,结合transform-origin和注释,能帮助开发者更好地掌握这些技巧。
42 4
|
4月前
|
算法 数据可视化 计算机视觉
Transform
Transform“【5月更文挑战第16天】”
32 1
|
前端开发
今天来讲讲 scale、translate 和 rotate 这三个属性,你不会以为我是要讲的是 transform 吧?
总所周知,transform 是 CSS3 中最强大的属性之一,它有这么三个函数属性值:scale、translate 和 rotate,它们分别是缩放、位移和旋转,但是你有没有想过有这么一天它们三个
227 0
今天来讲讲 scale、translate 和 rotate 这三个属性,你不会以为我是要讲的是 transform 吧?
|
图形学
【Transform3D】转换详解(看完就会)
【Transform3D】转换详解(看完就会)
88741 1
【Transform3D】转换详解(看完就会)
transform: translateY(-50%)实现垂直居中效果
transform: translateY(-50%)实现垂直居中效果
136 0
transform: translateY(-50%)实现垂直居中效果
|
算法
Transition matrix
**Transition matrix** 中文名:转移矩阵;转换矩阵;跃迁矩阵;状态转移矩阵
2602 0