CSS 2D转换和源点的影响原理(translate、scale、skew、rotate)
目录
1. 源点(transform-origin)
2. 移动(translate)
3. 缩放(scale)
4. 倾斜(skew)
5. 旋转(rotate)
使用2d转换时建议搭配CSS过渡效果,效果更柔和一点。
1. 源点(transform-origin)
作用:
元素在进行某些2D转换时会以源点为基础, 源点的默认位置是元素的正中央,
当默认的源点位置不满足我们的需求时, 可以对源点位置进行修改,
测试后感觉只有缩放和旋转受源点位置影响。
语法:
transform-origin: x轴位置 y轴位置;
取值可以使用像素、百分比、 和方位值(top、left、bottom、right)
效果:
先展示一下修改源点位置后的效果, 具体作用后面细说
2. 移动(translate)
语法:
横向移动 | transform: translateX(X轴移动像素或百分比); |
纵向移动 | transform: translateY(Y轴移动像素或百分比); |
双向移动连写 | transform: translateX(X轴移动像素或百分比) translateY(Y轴移动像素或百分比) |
双向移动简写 | transform: translate(X轴移动像素或百分比, Y轴移动像素或百分比) |
理论:
(1) 移动 不受源点影响
(2) translateX: 正数右移, 负数左移
(3) translateY: 正数下移, 负数上移
(4) 当使用百分比移动时,百分比指的是自身宽度
transform: translateX(50%); 向右移动自身宽度的50%
transform: translateY(50%); 向下移动自身高度的50%
效果:
3. 缩放(scale)
语法:
横向缩放 | transform: scaleX(元素宽度缩放比例) |
纵向缩放 | transform: scaleY(元素高度缩放比例) |
双向缩放连写 | transform: scaleX(元素宽度缩放比例) scaleY(元素高度缩放比例) |
双向缩放简写 | transform: scale(元素宽度缩放比例, 元素高度缩放比例) |
缩放比例:
n = 1: 元素默认比例
n > 0: 放大效果
0 < n < 1: 缩小效果
效果:
原理:
缩放确实会改变盒子大小, 但是并不一定是盒子两侧均衡缩放, 可能左边的多一点,右边少一点, 也可能右边多一点, 左边少一点。
这一切都是源点位置决定的, 具体的原理如下:
scaleX:可以理解为源点把元素的宽度一分为二, 而scaleX 就是分别对源点左右两侧的宽度进行倍增
scaleY:可以理解为源点把元素的高度一分为二, 而scaleY 就是分别对源点上下两侧的高度进行倍增
4. 倾斜(skew)
语法:
横向倾斜 | transform: skewX(倾斜角度); |
纵向倾斜 | transform: skewY(倾斜角度); |
双向倾斜连写 | transform: skewX(倾斜角度) skewY(倾斜角度); |
双向倾斜简写 | transform: skew(倾斜角度, 倾斜角度); |
理论:
(1) 倾斜不受源点影响
(2) skewX是正数: 元素上边界向左移动, 下边界向右移动, 直到左上角的角度为指定角度
(3) skewX是负数: 元素上边界向右移动, 下边界向左移动, 直到右上角的角度为指定角度
(4) skewY是正数: 元素左边界向上移动, 右边界向下移动, 直到左上角的角度为指定角度
(5) skewY是负数: 元素左边界向下移动, 右边界向上移动, 直到右上角的角度为指定角度
效果:
5. 旋转(rotate)
语法:
transform: rotate(旋转度数) //单位deg |
理论:
(1) 角度为正数: 以源点为轴顺时针旋转指定度数
(2) 角度为负数: 以源点为轴逆时针旋转指定度数
效果:
模拟一个源点, 可以更好的看懂旋转和源点的关系
代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>2D转换</title><style>.box {position: relative;width: 200px;height: 200px;margin-left: 200px;margin-top: 200px;background-color: skyblue;}/*模拟默认源点*/.origin {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 6px;height: 6px;background-color: black;border-radius: 3px;}/*模拟右上角源点*/.origin2 {position: absolute;top: 0;left: 100%;transform: translateX(-100%);width: 6px;height: 6px;background-color: black;border-radius: 3px;}/*以默认源点为轴旋转*/.box:first-child:hover {transform: rotate(70deg);}/*以自定义的源点位置为轴旋转*/.box:last-child:hover {transform: rotate(70deg);transform-origin: 100% 0;}</style>
</head>
<body>
<div class="box">Rotate<div class="origin"></div>
</div>
<div class="box">Rotate<div class="origin2"></div>
</div>
</body>
</html>
CSS 2D转换和源点的影响原理(translate、scale、skew、rotate)相关推荐
- CSS 2D 转换 transform translate() rotate() scale() skew() matrix()
CSS transforms 属性允许 移动.旋转.缩放和倾斜元素. translate() rotate() scaleX() scaleY() scale() skewX() skewY() sk ...
- css 2D转换之旋转rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转. 语法:transform:rotate(度数): 重点: Rotate里面跟度数,单位是deg 比如rotate(45deg) 角度为正时, ...
- 十四、CSS 3新特性详解(二)——2D转换(transform)、动画(animation)、动画序列
HTML5 第二天 一.rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转 使用步骤: 给元素添加转换属性 transform 属性值为 rotate(角度) 如 transfor ...
- 保姆级解读!CSS属性transform变形+2D转换+3D转换实例+代码+解析——Web前端系列学习笔记
文章目录 transfrom 2D转换 案例代码 效果图 元素变形原点 3D转换 3D转换--案例 案例代码 transfrom transform,翻译成中文的含义是"改变,使-变形:转换 ...
- CSS基础(part22)--2D转换
学习笔记,仅供参考,有错必究 参考自:pink老师教案 文章目录 2D转换 translate rotate scale 2D转换 2D 转换是改变标签在二维平面上的位置和形状: 移动: transl ...
- CSS 2D 3D转换
CSS3 2D转换 为什么称为2D转换呢 2D转换之移动 translate最大的优点是不会影响其他元素的位置 像margin-top等都会影响其他元素的布局,上面的往上面走,下面的会浮上去填满 使用 ...
- 2D转换+动画+3D转换
文章目录 2D转换 translate 实现盒子的竖直和水平居中 rotate origin 缩放scale 综合写法 渐变 动画 动画序列 基本使用 动画属性 3D转换 3D移动translate3 ...
- 2D转换 动画 3D转换
好烦好烦好烦好烦好烦好烦好烦好烦好烦好困好困好困好困好困好困 transform:sacle(x,y) 缩放 缩放 x y放倍数 宽度,高度 注意其中x y用逗号分隔 可以是小数 不会影响其他盒子 鼠 ...
- CSS3的2D转换和3D转换,你了解了嘛?
css3的2D转换和3D转换 CSS3大纲: 本次讲解css3带来了两种转换:2D转换和3D转换 1. 2D转换 转换( transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移(tr ...
最新文章
- vc 递归删除非空文件夹
- 命php令删除文件夹,window_win7系统通过cmd命令提示符的del命令删除文件的详细教程,怎么利用cmd命令提示符的del命 - phpStudy...
- linux命令收集录
- 【华为云技术分享】降本增效的背后:华为云瑶光数字化经营实战
- aspnet拒绝ip访问_代理ip的好处是什么?
- jdbc和mysql编程_MySql数据库与JDBC编程三
- mysq 没有mysql数据库_mysq 没有mysql数据库
- 二路归并排序 代码实例
- apache端口一直在增加_PHP环境全套针细教程:Windows安装Apache, PHP and MYSQL
- java web 部署_一步一步将java web项目部署到云服务器
- Windows DLL 注入技术
- 计算机如何设置光驱启动,电脑如何设置光驱启动(含UEFI BIOS方法)?
- 苹果上网本报价_买水果“送”水泥?无良商家昧良心!苹果纸箱灌水泥,商户坦言:“赚箱子钱”|水泥|水果箱|水泥浆|水果...
- Jenkins配置报错-Problem accessing /jenkins/. Reason
- 远程连接服务器突然失败
- git常用操作以及码云Gitee连接git
- PCB工程分享:快速了解PCB设计入门基础知识
- 9月2日最新易启秀源码3GB大小700套模版
- 玩吃鸡时错误服务器维护,更新吃鸡时发生错误无法连接服务器 | 手游网游页游攻略大全...
- 金蝶采购模块退货业务标准流程
热门文章
- 【git】You have not concluded your merge (MERGE_HEAD exists).
- 用经典的模拟退火算法求解30城市小规模的TSP问题
- java实现客户端 与服务端的对话_Socket实现单客户端与服务器对话功能
- ev3和python哪个好_乐高教育EV3比SPIKE Prime更好的十个理由!
- 【GameMaker 极速入门】#1环境配置
- 202107 VMware NSX-T培训笔记2(东西向网段间路由原理)
- 右键新建excel无法打开
- PHOTOSHOP超强磨皮大法 将斑点选出来
- 记一次app爬虫sign破解
- Word 2010安装包