H5 + C3基础(六)(2D转换transform 位移 & 旋转 & 缩放)

这篇具有很好参考价值的文章主要介绍了H5 + C3基础(六)(2D转换transform 位移 & 旋转 & 缩放)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

2D转换transform

所谓2D转换,就是在二维坐标系内进行各种操作,包括平移,转动,缩放等等;

平移

语法:

transform:translate(x, y);
transform:translateX(x);
transform:translateY(y);

x和y都是相对于屏幕左上角而言,左上为负值,右下为正值;与传统数学坐标系注意区分

要实现盒子的平移,目前有多种方式

  • margin
  • 定位
  • translate
  • 父盒子的 padding

注意点:

  1. translate不影响其他元素位置,和相对定位类似,不脱离文档流。
  2. translate 使用百分比时,是相对自身宽高而言,而不是相对父盒子的宽高
  3. 位移只针对行内块和块级元素有效;行内元素不适用
  4. 位移覆盖显示优先级
    • 有位移的覆盖无位移的
    • 都有位移时,后面定义的元素覆盖前面的元素
利用平移百分比优化盒子水平垂直居中

之前是定位之后,往回平移盒子的尺寸的一半,实现;如下

position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
background-color: #ee20ee;
margin-left: -50px;
margin-top: -50px;

如果盒子尺寸一旦变化,margin的值也要跟着改动,如果使用平移 50% 实现,就无需改动。

position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
background-color: #ee20ee;
transform: translate(-50%, -50%);

旋转

绕着哪个轴旋转
语法:
transform:rotate(45deg); // 默认相当于 rotateZ
transform:rotateX(45deg);
transform:rotateY(45deg);
transform:rotateZ(45deg);
transform:rotate3d(x, y, z, 180deg); // 从3维原点到指定3维坐标点(x,y,z)连接的线旋转 180度。

旋转几度,默认旋转点为盒子中心点

transform:rotate(45deg);

同样,旋转也只对块级元素行内块有效

指定2d变换的中心点 transform-origin

旋转点坐标 中间是空格不是逗号
包括 缩放和旋转的中心点都可以通过这个属性设置
语法:
transform-origin: x y; // 指定Z轴旋转(2d旋转)中心点
除了给定像素值,还可以指定方位:top,bottom,left,right,center

transform-origin: 10px 10px;

示例

.c1 {
    background-color: #e6393c;
    transition: all 0.5s;
    transform-origin: left bottom;
}

.c1:hover {
    transform: rotate(45deg);
}

缩放

设置盒子的尺寸在指定方向上缩放指定倍数(整数小数均可)
语法:
transform:scale(x, y); # 分别设置x,y轴方向尺寸
transform: scale(a); # 统一设置设置x,y轴方向尺寸为同一个值
transform:scaleX(x); # 设置x轴方向尺寸
transform:scaleY(y); # 设置y轴方向尺寸
transform:scaleZ(z); # 设置z轴方向尺寸

transform: scale3d(2, 2, 2); 分别设置 xyz 三个方向的上的扩缩比

# 以下三者等价
transform: scale(2);
transform: scaleX(2) scaleY(2);
transform: scale(2, 2);

2d转换简写

先后顺序为:位移 → 旋转 → 缩放

transform: translate() rotate() scale() 

由于位移会影响坐标,因此需将位移放在最前面。文章来源地址https://www.toymoban.com/news/detail-678055.html

到了这里,关于H5 + C3基础(六)(2D转换transform 位移 & 旋转 & 缩放)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【CSS3】CSS3 3D 转换 ① ( CSS3 3D 转换简介 | 3D 物体与 2D 物体区别 | 3D 空间坐标系 | 常用的 3D 转换属性 | 3D 位移转换语法 | 代码示例 )

    3D 显示的物体 与 平面 2D 显示的物体有明显的不同 , 3D 显示效果有 近大远小 的 特点 ; 元素的 2D 的 转换效果 有 平移 , 旋转 , 缩放 效果 , 同样有对应的 3D 转换效果 ; 2D 平面坐标系 中 , 只有 x 轴 和 y 轴 ; 3D 空间坐标系 比 2D 平面坐标系 多了一个 Z 轴 ; x 轴 : 水平向右 ; 左侧是

    2024年02月12日
    浏览(45)
  • 2023最新八股文前端面试题 (css、js、h5c3)

    随着科技的不断发展,前端技术也在不断演进,成为了现代应用开发中不可或缺的一部分。在2023年的前端面试中,面试官们常常会问及关于CSS、JS以及HTML5/CSS3等方面的问题,以评估面试者的技术深度和实践经验。下面,让我们来一起解析这些最新的前端面试题,探讨这些技术的前沿趋势。

    2024年02月16日
    浏览(76)
  • Blender基础操作:移动、旋转、缩放、删除、抓取、复制

    1. 物体的移动 微调面板:Adjust last operation:对上一步操作进行微调 2.物体旋转与缩放 快速归位 几个快捷键 ALT+G 坐标归零 ALT+R 旋转归零 ALT+S 缩放归零 3.删除、抓取、复制 快捷键x:确认后删除 (视图不能缩放处理方法:选择视图》对齐视图》游标居中并查看全部/视图中心对

    2024年02月11日
    浏览(50)
  • 图形学基础:二维三维刚体的移动、缩放和旋转矩阵

    1.1 缩放矩阵 x,y分别表示在x轴,y轴缩放的倍数 示例: 点(2,1)在x,y轴上分别缩放x倍,y倍 1.2 平移矩阵 x,y分表表示在x轴,y轴上移动的距离 示例:点(2,1)分别在x轴,y轴上平移x距离,y距离 1.3 旋转矩阵 示例:点(x,y) 绕原点逆时针旋转θ° 示例: 点 (2,0) 绕原点旋转90° 绕

    2024年04月15日
    浏览(39)
  • 【入门】DoTween的基础API使用(一):移动缩放循环震动旋转

    DoMove      DoLocalMove 在自身坐标系之内移动 (1秒之内)  (1,1,1 的大小最终会变成 4,4,4) (最终的大小一直是 2,2,2, 很快的变大变小) (也是2,2,2 但是匀速) (注意参数为 -1 )    

    2024年02月16日
    浏览(62)
  • css空间转换/视距/空间旋转/立体呈现/3d导航案例/空间缩放/animation动画/走马灯案例/精灵动画/多组动画/全民出游案例

    空间:是从坐标轴角度定义xyz三条坐标轴构成了一个立体空间按,z轴位置与视线方向相同。 属性:transform         transform:translate3d(x,y,z);         transform:translatex();         transform:translatey();         transform:translatez(); 取值(正负均可)         像素

    2024年04月22日
    浏览(44)
  • 计算机图形学基础:2D/3D坐标变换(Transformation)

    本文讲解了2D变换和3D变换式如何用矩阵表示的 如何将线性和非线性变换进行一个统一表示形式 三维物体在二维空间上的映射 表示向量添加了一维,分别表示单位距离和平移不变形的方向 旋转默认都是以(0, 0)为中心

    2023年04月08日
    浏览(42)
  • Web3D数学基础(平移、旋转、缩放矩阵)—WebGL、WebGPU、Threejs

    参考资料:threejs中文网 threejs qq交流群:814702116 本下节课给大家介绍下矩阵的概念,以及用于几何变换的矩阵,比如平移矩阵、缩放矩阵、旋转矩阵。 如果你对这些几何变换的矩阵概念比较熟悉,可以跳过本节课。 线性代数、图形学 如果你有《线性代数》、《计算机图形学

    2024年02月03日
    浏览(50)
  • ThreeJS-3D教学六-物体位移旋转

    之前文章其实也有涉及到这方面的内容,比如在ThreeJS-3D教学三:平移缩放+物体沿轨迹运动这篇中,通过获取轨迹点物体动起来,其它几篇文章也有旋转的效果,本篇我们来详细看下,另外加了tween.js知识点,tween可以很好的协助 three 做动画,与之相似的还有 gsap.js方法类似。

    2024年02月04日
    浏览(45)
  • unity物体位移 旋转后的复位问题

    在你第一眼看到这个问题的时候可能会想到只需将物体的position重置就可以,这样做可能忽略的是物体的rotation。 在start()函数中存取要复位物体的transform, 然后再赋值 ? 如果这么做了你会发现, 那个存取transform的左值,是随着物体transform变化而变化的 如果将它debug.log一

    2024年02月16日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包