CSS3 Transform变形(2D转换)
Transform:对元素进行变形;
Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画。但只有两个关键贞。开始,结束。
Animation:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画。可以设置多个关键贞。
Transition与Animation:
transition需要触发一个事件 ,而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元 素css的属性值,从而达到一种动画的效果。
我们首先学习Transform
transform 2D/3D 转换属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
CSS3 2D 转换
通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。
1.2D Transform转换属性
属性 | 描述 | CSS |
transform | 向元素应用 2D 或 3D 转换。 | 3 |
transform-origin | 允许你改变被转换元素的位置。 | 3 |
2.2D Transform 方法
函数 | 描述 | 实例 | 试一试 |
转换 | |||
translateX(n) translateY(n) |
沿着 X 或Y 轴移动元素。 | ||
translate(x,y) | 沿着 X 和 Y 轴移动元素。 |
值 translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。 div{ |
试一试 |
缩放 | |||
scaleX(n) scaleY(n) |
改变元素的宽或高度。 | ||
scale(x,y) | 改变元素的宽度和高度。 |
值 scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。 div{ |
试一试 |
定义 2D 旋转 | |||
rotate(angle) | 在参数中规定角度。turn是圈,1turn = 360deg;另外还有弧度rad,2πrad = 1turn = 360deg。如,transform:rotate(2turn); //旋转两圈 |
值 rotate(30deg) 把元素顺时针旋转 30 度。 div{ |
试一试 |
倾斜 | |||
skewX(angle) skewY(angle) |
沿着 X 、或Y轴。 | ||
skew(x-angle,y-angle) | 沿着 X 和 Y 轴。 |
值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度。 div{ |
试一试 |
使用六个值的矩阵。 | |||
matrix(n,n,n,n,n,n) |
定义 2D 转换,使用六个值的矩阵。
matrix() 方法把所有 2D 转换方法组合在一起。 |
使用 matrix 方法将 div 元素旋转 30 度 div{ |
试一试 |
转载于:https://www.cnblogs.com/shenzikun1314/p/6390176.html
CSS3 Transform变形(2D转换)相关推荐
- 保姆级解读!CSS属性transform变形+2D转换+3D转换实例+代码+解析——Web前端系列学习笔记
文章目录 transfrom 2D转换 案例代码 效果图 元素变形原点 3D转换 3D转换--案例 案例代码 transfrom transform,翻译成中文的含义是"改变,使-变形:转换 ...
- CSS3 Transform变形理解与应用
CSS3 Transform变形理解与应用 Transform:对元素进行变形: Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞. ...
- CSS3第二日--2D转换
CSS3提供了2D转换功能,能够对元素进行移动.缩放和转动等功能. 2D转换的属性名为transform,使用方法为transform:method(value). 2D转换方法有translate. ...
- CSS3 transform变形属性、2D变形、3D变形
第十五章:transform变形属性 一.2D变形 1. rotate()旋转属性值 2. translate()位移属性值 3. scale()缩放属性值 4. skew()倾斜属性值 5. tra ...
- CSS3新特性详解(三):CSS3 2D转换和3D转换 transform 变形使用详解
关于CSS3新特性,在上篇博文中"CSS3新特性详解(二):CSS3 字体@font-face详解.如何创建和修改woff字体文件及text-shadow等文本效果",讨论了C ...
- html52D转换3D,CSS3 Transform 2D和3D转换
1.2 缩放 语法transform : scale(x,y); -webkit-transform : scale(x,y); 根据倍数来缩放,取决于宽度(X轴)和高度(Y轴)的参数:也可以用一个参 ...
- CSS3——2D变形(CSS3) transform
让青春吹动了你的长发 2D变形(CSS3) transform 移动 translate(x, y) 缩放 scale(x, y) 旋转 rotate(deg) transform-origin可以调 ...
- HTML5 和 CSS3 提高篇 下 2D转换 transform(移动、旋转、缩放、中心点、综合写法);动画(animation);3D转换;浏览器私有前缀;背景色线性渐变
------ 2D 转换(transform)移动.旋转.缩放.中心点 ------- 转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.缩放等效果 转换(tran ...
- CSS3新选择器,盒子模型,过渡动画transition,2D转换transform
关于css属性选择器常用的有: id选择器(#box),选择id为box的元素 类选择器(.one),选择类名为one的所有元素 标签选择器(div),选择标签为div的所有元素 后代选择器(#box ...
最新文章
- java xml 学习_java学习(四)xml
- adb和adb shell
- Linux+Nginx+Asp.net Core部署
- 显卡mx150和230哪个好_建模渲染用专业图形显卡和游戏显卡哪个更好?
- 螃蟹学PHP设计模式之访问者模式
- 知己知彼-关于Oracle安全比特币勒索问题揭秘和防范
- Hadoop作业提交多种方案具体流程详解
- 哪种台灯的灯光适合学生用?盘点真正适合孩子的护眼台灯
- charles https 抓包
- eplan 电箱布局_Eplan D布局步骤
- 想要无所不能的女秘书,用Office 365啊
- 用户态和内核态的切换耗费时间的原因
- 计算机专业毕业论文模板图文,计算机专业毕业论文提纲范文模板
- 项目总结(二) 网格化管理系统问题总结
- Apache Marmony
- 2022全新直播短视频系统源码+附教程/可二开可采集
- pip安装包下载地址
- 百度地图定位API,精度提高
- CKeditor5自定配置字体大小
- Win2008、Win2012和Win2016操作系统设置多用户同时远程。很方便
热门文章
- 【嵌入式】Linux开发工具gdb及远程调试
- 【jQuery笔记Part4】01-jQuery-节点操作-添加节点-删除节点-复制节点
- [转]使用FFmpeg将视频推流到nginx,通过vlc拉流播放(通过命令的方式)
- 浙江农林大学有计算机专业,浙江农林大学计算机科学与技术专业在职研究生
- 苹果CMS V10 播放记录_苹果cms10怎么更新集数?
- 服务器系统read,虚拟磁盘服务器系统的开发与实现-Read.PDF
- asp.net oracle 问号,ASP.NET中文变问号问题解决方案
- 软件工程导论 统一建模语言UML概述
- AcWing.282石子合并(区间DP)题解
- 正态分布初始化 torch.nn.Embedding.weight()与torch.nn.init.normal()的验证对比