2D转换之旋转rotate，2D转换中心点transform-origin及2D转换之缩放scale

最新推荐文章于 2024-08-18 20:44:12 发布
最新推荐文章于 2024-08-18 20:44:12 发布
阅读量888 收藏
点赞数 1
文章标签： 大数据 html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dummerd/article/details/125840505
版权
本文详细介绍了CSS中的2D转换，包括旋转rotate、转换中心点transform-origin以及缩放scale。旋转指定度数，正向为顺时针，负向为逆时针，中心点默认为元素中心。transform-origin允许设置元素转换的中心点，可使用方位或像素。缩放scale可以放大或缩小元素，同时支持设置缩放中心点，并且不会影响其他元素布局。最后提到了2D转换的综合应用及顺序对效果的影响。
摘要由CSDN通过智能技术生成

目录

一.2D转换之旋转rotate

二.2D转换中心点transform-origin

三.2D转换之缩放scale

一.2D转换之旋转rotate

2D旋转指的是让元素在平面内顺时针旋转或逆时针旋转

1.语法

   transform:rotate(度数）

2.重点

rotate里面跟度数，单位是deg 比如rotate(45deg)

角度为正时，顺时针，负时，为逆时针

默认旋转的中心点是元素的中心点

二.2D转换中心点transform-origin

      我们可以设置元素转换的中心点

1.语法

    transform-origin:X Y;

2.重点

注意后面的参数X和Y用空格 隔开

XY默认转换的中心点是元素的中心点（50% 50%）

还可以给x y设置像素或者方位名词（top bottom left right center）

三.2D转换之缩放scale

   缩放就是可以放大和缩小，只要给元素添加上了这个属性就能控制它放大还是缩小

1.语法

  transform:scale(x,y)

2.注意

其中的x和y用逗号隔开

最低0.47元/天 解锁文章
Dummerd
关注
CSS3 之 2D转换——移动translate、旋转rotate、旋转中心点transform-origin、缩放scale
qq_43623147的博客
12-17 5709
转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移translate、旋转rotate、缩放scale等效果。 一、二维坐标系 2向右和向下变大二、2D转换之移动translate 2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。 1. 语法 transform: translate(x,y); //或者分开写 transform:translateX(n); transform:translateY(n); 2. 重点 定义2D转换中.
CSS3-transform (2D转换)及transform-origin
ChangAnbaba的博客
07-22 284
transform (2D转换) transform属性允许你旋转，缩放，倾斜或平移给定元素。通过修改CSS视觉格式化模型的坐标空间来实现。 translate(移动) 沿着X Y轴移动 不影响其它元素的位置 对行内标签没用(a,input,span等) translateX 和 translateY使用也是一样的。 rotate(旋转) 度数的单位是deg (degree) 度数可以是正，负 scale(缩放) scale也可以修改中心点 transform:scale(x,y) trans
2D图片旋转
05-05
自学时练习的一个2D图片旋转，以及自己总结时编写的按钮的2D旋转
2d的旋转
qq_53640252的博客
03-01 195
2d的旋转
前端css动画缩放transform: scale()
最新发布
weixin_58694594的博客
08-18 440
鼠标放上去就可以缩小放大了。
2D旋转——rotate
weixin_46032713的博客
08-15 408
旋转rotate 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。 旋转方式 顺时针旋转45度 transform: rotate(45deg); 案例 ... img { width: 150px; border-radius: 50%; b
2d图形旋转
zhangdaochao的博客
08-29 382
2d图形旋转
2D旋转
weixin_42378409的博客
03-16 131
在这里插入代码片<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do...
css3学习之2D转换功能详解
09-27
在CSS3中，2D转换是一个强大的特性，它允许开发者对网页元素进行一系列二维空间内的图形变换，包括平移、旋转、缩放和倾斜。这一功能显著提升了网页设计的动态性和交互性。本文将深入探讨CSS3中的2D转换功能，帮助你...
随手记——css3 2D转换（transform）
01-08
转换中心点（transform-origin） 缩放（scale） 2D转换综合写法 正文 __start： 位移（translate） 语法 说明 transform:translate(x,y) 元素在x轴移动x像素，y轴移动y像素 transform:translateX(n) 元素在...
数学基础 —— 旋转（2D 正旋转）
keng_s的博客
08-05 6158
一般的来讲大家喜欢称旋转为正时针旋转，或者逆时针旋转，例如我让一个点绕圆心旋转90°，大家都会理解为逆时针吧这个点旋转90°，实际上这个说法是存在漏洞和错误的， 当我们的坐标系不使用左手坐标系时这个说法是错误的，所以在此定义 一个正旋转。 即，2d中，坐标轴，x轴朝y轴方向旋转90°和y轴重合的方向视为正旋转。(通俗的来讲就是x轴旋转到y轴只需要旋转90°，那么这个旋转就是正旋转）
2D翻转
04-29
NULL 博文链接：https://dingfan.iteye.com/blog/2384357
scale和transform-origin控制动画的方向
青阳的博客
05-07 3230
从左进入，右边离开我们将一个 hover 动画分解为 3 个部分：hover 进入状态hover 停留状态hover 离开状态但是，对于一个 hover 效果而言，正常来说，只有初始状态，和hover状态两种。可能我们的代码是这样：div {    xxxx...} div:hover {    xxxx...}对于一个 hover transition 动画，它应该是从：正常状态 -&gt; h...
关于2D旋转基础总结
m0_60273757的博客
08-09 313
移动 translate 格式：transform:translate(x,y); X轴和Y轴同时移动 （合并书写，可分开书写） transform:translateX(n); 沿X轴移动 transform:translateY(n); 沿Y轴移动 举例：transform:translate(100px,50%); 沿X轴正方向移动100像素同时沿Y轴正方向移动盒子的50% transform:translateX(-100px);
2D转换之旋转与缩放
chenyiboke的博客
11-15 1689
2D转换之旋转 rotate 2D转换指的是让元素在2维平面内顺时针旋转或者逆时针旋转。 1. 语法： transform：rotate（度数） 2. 重点： 1. rotate里面跟度数，单位是deg 比如 rotate（45deg）。 2. 角度为正时，顺时针，负时，为逆时针。 3. 默认旋转的中心是元素的中心点。 命令演示： <...
2D转换（移动：translate，旋转：rotate，缩放：scale，2D转换综合写法）
shy的博客
04-21 986
2D转换 transform是CSS3中最具有颠覆性的特性之一，可以实现元素的位移、旋转、缩放等效果 移动：translate 旋转：rotate 缩放：scale 2D转换是改变标签在二维平面上位置和形状的一种技术 移动：translate 2D移动是2D转换中的一种功能，可以改变元素的位置，类似定位 translate不会影响到其他元素的位置 translate中的百分比单位是相对于自身元素的 对行内标签没有效果 transform: translate(x,y);或者分开写
2D转换之rotate练习
leechoy
07-18 348
效果图： 源代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body {
【CSS3】CSS3 2D 转换 - rotate 旋转 ③ ( 使用 transfrom-origin 设置旋转中心点 | 使用 方位词 / 百分比值 / 像素值 设置旋转中心点 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
08-05 5848
一、使用 transfrom-origin 设置旋转中心点 二、代码示例 - 使用 transfrom-origin 设置旋转中心点 1、代码示例 - 使用方位词设置旋转中心点 2、代码示例 - 使用百分比设置旋转中心点 3、代码示例 - 使用像素值设置旋转中心点
2D旋转transform
micoria的博客
01-31 463
5.1 transform转换 5.1.1 translate(x,y) 位移 可以改变元素在页面中的位置，类似定位。 经常和transition过渡配合做出相对应的效果。 补充： 现在可以将盒子移动的方式有哪些？ 定位 （相对定位不会影响其他盒子的位置） 外边距（margin） 2D转换 区别：和以上两种方式不同的是，2D转换不会影响其他盒子的位置（可以和position组合进行盒子垂直居中定位，下面有案例） 语法 transform: translate(x , y); tr
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值