CSS3 Transform 变形
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
w3Scholl
http://www.w3school.com.cn/cssref/pr_transform.asp
浏览器支持
transform: none|transform-functions;
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 */ }
Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。
Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。
Opera 只支持 2D 转换。
属性列表
值 | 描述 | 测试 |
---|---|---|
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 转换元素定义透视视图。 | 测试 |
转载于:https://www.cnblogs.com/dtdxrk/p/4324218.html
CSS3 Transform 变形相关推荐
- CSS3 Transform变形理解与应用
CSS3 Transform变形理解与应用 Transform:对元素进行变形: Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞. ...
- CSS3 transform变形属性、2D变形、3D变形
第十五章:transform变形属性 一.2D变形 1. rotate()旋转属性值 2. translate()位移属性值 3. scale()缩放属性值 4. skew()倾斜属性值 5. tra ...
- CSS3 Transform变形(2D转换)
Transform:对元素进行变形: Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开始,结束. Animation:对元素某个 ...
- CSS 变形(CSS3) transform
一.2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前 ...
- CSS3——2D变形(CSS3) transform
让青春吹动了你的长发 2D变形(CSS3) transform 移动 translate(x, y) 缩放 scale(x, y) 旋转 rotate(deg) transform-origin可以调 ...
- CSS3新特性详解(三):CSS3 2D转换和3D转换 transform 变形使用详解
关于CSS3新特性,在上篇博文中"CSS3新特性详解(二):CSS3 字体@font-face详解.如何创建和修改woff字体文件及text-shadow等文本效果",讨论了C ...
- css3transform:skew(),CSS3变形倾斜(CSS3 Transform Skew)
CSS3变形倾斜(CSS3 Transform Skew) 有谁知道如何实现这样的倾斜: 使用CSS的新变换属性? 你可以看到我正在扭曲两个角落,任何人都知道这是否可行? Does anyone kn ...
- css3中变形与动画(三)
transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...
- css中变形,css3中变形处理
transfrom功能 在css3 中可以使用transfrom功能实现文字或图像的旋转,缩放,倾斜,移动等变形处理 deg是css3中使用的一种角度单位. 旋转: 使用rotate方法,在参数中加入 ...
- html52D转换3D,CSS3 Transform 2D和3D转换
1.2 缩放 语法transform : scale(x,y); -webkit-transform : scale(x,y); 根据倍数来缩放,取决于宽度(X轴)和高度(Y轴)的参数:也可以用一个参 ...
最新文章
- 虚拟化--006 VCAC的sso配置成功
- shell 编程整合
- 抓屏的各种方法(http://www.codeproject.com/KB/dialog/screencap.aspx)
- [BZOJ3529][Sdoi2014]数表
- notepad多行编辑_Windows 10 UWP 推荐 | 极具现代感的轻量化文本编辑器:Notepads
- android系统存储路径在哪里,Android 手机存储目录
- Mean Shift算法(3)在OpenCV上的实现——图像分割PyrMeanShiftFiltering
- 如何开始使用LightZone
- Altium AD20中铺铜被导线分割的解决方法,如何正确覆铜整片区域
- ll文件显示为?????_关于shell编程中的文件测试简单的操作实例
- Oracle表分区大全
- Mac VS code latex pdf 安装教程
- 计算机截图方法,电脑7种快速截图方法,很多人都不知道!
- python黑帽子学习
- 移动Web UI组件库汇总
- GoF 23种设计模式
- 智能优化算法:蝗虫优化算法-附代码
- 云服务器防火墙关闭 tomcat不能正常访问
- AngularJS 模块
- 大型分布式网站架构如何设计
热门文章
- python实现图像检索的三种(直方图/OpenCV/哈希法)
- MatConvNet中关于vl_simplenn_display的一些分析
- U-net使用, 图像分割(边缘检测)
- 基于Caffe的人脸检测实现
- caffe 实践程序4——cifar10网络
- python求解重叠区域线段覆盖总长度
- 2021-06-16异步调用 CompletableFuture
- 当identity_insert 设置为off时不能为表_最近新get日志测试方法,再也不用为故障响应慢发愁!...
- 【Django 2021年最新版教程30】django项目部署到华为云(nginx uWSGI mysql方式)
- 区块链 PBFT最多多少个节点