移动web一之2D转换

已于 2022-11-14 20:22:19 修改
阅读量178 收藏 1
点赞数 3
文章标签： 前端 html css
于 2022-11-14 20:09:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LTiAmo5/article/details/127827482
版权
本文详细介绍了CSS中的2D转换，包括位移、旋转、缩放的语法及用法。位移通过translate实现，不改变布局但能移动元素位置；旋转使用rotate，支持角度单位deg和turn；缩放利用scale，可调整元素尺寸。还探讨了综合使用这些转换的方法，如先位移再旋转或先缩放再旋转，实现复杂的元素动态效果。
摘要由CSDN通过智能技术生成

一.2D转换之位移

        1.语法格式：transform:translate(水平方向,垂直方向)   即：transform: translate(400px,400px);

        2.单方向写法： transform: translateX(400px);
                                  transform: translateY(400px);

 3.位移与外边距的区别:

        ◇margin的100%是他的父元素的100%的宽     即 margin-left: 100%; margin在移动的时候会影响其他的元素的位置 margin-top: 50px;

        ◇translate位移的100%是自己大小的100%      即:  transform:translate(100%,0);  translate位移他不会影响其他的元素,有类似于相对定位的特点,他没有脱离标准流 

4.

最低0.47元/天 解锁文章
LTiAmo5
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局
qq_48687155的博客
07-28 365
移动Web网页开发：2D&3D转换与动画、移动端布局、响应式布局
基于Web的2D图形引擎Matter.js.zip
07-19
Matter.js 是一个基于 Web 的 2D 图形引擎。特性：物理属性(质量、面积、密度等)任何凸多边形的刚体稳定的叠加和 resting碰撞 (broad-phase, mid-phase and narrow-phase)Restitution (elastic and inelastic collisions)Conservation of momentumFriction and resistanceConstraintsGravityComposite bodiesSleeping and static bodiesEventsRounded corners (chamfering)Views (translate, zoom)Collision queries (raycasting, region tests)Time scaling (slow-mo, speed-up)Canvas renderer (supports vectors and textures)WebGL renderer (requires pixi.js)MatterTools for creating, testing and debugging worldsWorld state serialisation (requires resurrect.js)Cross-browser (Chrome, Firefox, Safari, IE8 )Mobile-compatible (touch, responsive)An original JavaScript physics implementation (not a port)示例代码：// Matter.js module aliases var Engine = Matter.Engine,     World = Matter.World,     Bodies = Matter.Bodies; // create a Matter.js engine var engine = Engine.create(document.body); // create two boxes and a ground var boxA = Bodies.rectangle(400, 200, 80, 80); var boxB = Bodies.rectangle(450, 50, 80, 80); var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true }); // add all of the bodies to the world World.add(engine.world, [boxA, boxB, ground]); // run the engine Engine.run(engine); 标签：Matter
2D转换
从零开始的web前端工程师生活
11-06 451
2D转换 transform 转换(transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。 转换也可以简单理解为变形。 可分为三种： 移动：translate 旋转：rotate 缩放：scale 下面我们就来详细的讲一下他们分别有什么作用 1、二维坐标系 2D转换是改变标签在二维平面上的位置和形状的一种技术，我们先来学习一下二维坐标系。 坐标和我们认为的是...
Web前端开发——CSS3之2D变换：transform属性
wq_ocean_的博客
02-06 396
1. 内容 这里主要介绍旋转和缩放属性 2.旋转transform:rotate() 用法为：transform:rotate( *deg)，其中*表示数字，数字为正顺时针旋转，为负逆时针旋转，webstorm可用trsf快速扩展； <!doctype html> <html lang="en"> <head> <meta c...
<<web>>2D,transform
知行和一
05-13 420
1，移动坐标translate 2，旋转rotate 3，放大缩小scale 4，翻转 skew() 1，移动坐标translatediv#div2 { transform:translate(50px,100px); -ms-transform:translate(50px,100px); /* IE 9 */ -moz-transform:translate(50px,100p
移动web网页开发——2D转换
m0_45659764的博客
03-29 553
一、平面转换 1.1 平面转换概念 平面转换 改变盒子在平面内的形态（位移、旋转、缩放） 2D转换 平面转换属性 transform 1.2 位移 语法 transform:translate(水平移动距离，垂直移动距离 ); 取值（正负均可） 像素单位数值 百分比（参照物为盒子自身尺寸） 注意：x轴正向为右，Y轴正向为下 技巧 translate()如果只给出一个值，表示x轴方向移动距离 单独设置某个方向的移动距离：translateX() & translateY..
移动web 第一天字体图标、平面转换、渐变
12-25
2D转换主要涉及位移、旋转和缩放。常用属性有`transform`，其基本语法如下： ```css transform: translate(x, y); ``` 其中，`x`和`y`表示沿着X轴和Y轴的移动距离，可以使用像素单位、百分比等值。例如，只提供一个...
9个3D＆2D转换与过渡画廊特效
11-17
在IT行业中，3D和2D转换与过渡画廊特效是一种常见的视觉效果技术，广泛应用于电影、游戏、网站设计、应用程序界面以及多媒体演示等领域。这些特效可以极大地提升用户体验，增加内容的吸引力。以下是对这个主题的详细...
web前端之移动web 适合新接触前端的小伙伴
09-06
移动web入门 flex布局和rem布局 less（css预编译器）介绍 响应式布局 过渡 2d转换3d转换 媒体查询
高清H5移动web开发书籍
10-10
这本《高清H5移动web开发书籍》集合了三本关于这一主题的专业电子书，旨在帮助读者全面掌握H5在移动环境下的应用开发。 第一本电子书可能涵盖了H5的基础知识，包括HTML5的新特性如离线存储、音频/视频处理、Canvas...
web2d-开源
04-28
一个基于HTML画布的简单查看器，用于二维三角形网格。
Webgl的2D开发方案(一)spritebatcher
dianjupi9036的博客
07-19 115
使用TypeScript 和 webgl 开发 第一步：实现了SpriteBatcher 例子如下 http://oak2x0a9v.bkt.clouddn.com/test/index.html 源码（要用svn抓） http://code.taobao.org/svn/falconconv/trunk/babylonfan/webgl 使用方法...
Web前端笔记-2D图形平面内平移定位（two.js）
IT1995的博客
07-14 1376
此处是在控制台中输入了window.mainPage.flyToPosition(-1000,500)，他是经过平移过去的。 整个坐标盘是这样的： 这里使用two.bind(‘update’,function(frameCount){})用于平移时的绑定跟新，当平移结束后，使用two.unbind(‘update’); 平移相关的代码： export function flyTo({x, y}){ waterWave(x, y); //计算出目前中心点与x,y坐标的差值 ..
移动web之2D位移
m0_74878568的博客
11-15 157
移动web 之 2D位移
打造原生 WebGL 2D 引擎：一场创意与技术的融合
weixin_43980651的博客
07-23 236
WebGL技术闪现在我的视野中。作为一种强大的Web图形库，它能够在浏览器中实现硬件加速的图形渲染，为我提供了无限的创意空间。我决定用自己的双手打造一个基于原生 WebGL 的2D引擎，旨在让我能够轻松处理图像和创作出令人眼前一亮的网页效果。
2020-11-20 web变形 2D转换
qq_45659634的博客
11-20 249
web变形 2D转换 倾斜 transform:sekw(X-deg,Y-deg); 旋转 transform:rotate(deg); 缩放 transform:scale(X-deg,Y-deg); 平移 transform:translate(X-deg,Y-deg); 代码示例1 倾斜 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <met
Web---2D&3D 转换与动画
qq_43658148的博客
07-10 309
一、字体图标一、字体图标目的：使用字体图标技巧实现网页中简洁图标效果1.iconfont的使用1）iconfont的网址2）生成iconfont文件，导入到项目a.创建项目b.创建好项目c.选择自己要使用的图标，点击上面的购物车d.点击购物车添加到项目e.在我的项目中点击下载到本地f. 下载完成以后就会有如下的文件，导入到项目中使用就可以2.购物车案例a.使用link的方式导入iconfont.css文件。
【Web2D/3D】CSS3的2D/3D转换transform、过渡transistion、关键帧动画animation（第一篇）
最新发布
weixin_45620943的博客
12-26 1336
本篇开始介绍Web2D和3D相关基础知识，会从CSS3的2D/3D转换、过渡、动画，讲到Canvas 2D图形绘制，再到SVG，最后到WebGL。
【web前端开发 | CSS3】2D转换
小赵不忙的博客
11-11 253
思维导图 转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放。 1：移动 translate 2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。 transform: translate(x, y); /*这两个可以单独写，但不可以两个同时出现，会层叠 */ transform: translateX(x); transform: translateY(y);
移动Web开发：字体图标与CSS变换教程
移动Web开发涉及一系列关键知识点，这些知识点主要围绕移动端用户体验优化和响应式设计展开。本文将重点介绍移动端Web开发中的字体图标、2D转换、定位与布局以及CSS3动画技术。 1. **字体图标**：在移动端网页设计...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值