CSS3-transform (2D转换)及transform-origin

最新推荐文章于 2024-07-09 16:40:54 发布
最新推荐文章于 2024-07-09 16:40:54 发布
阅读量255 收藏
点赞数 1
分类专栏： CSS3新特性 文章标签： html5 css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ChangAnbaba/article/details/107511688
版权

transform (2D转换)

transform属性允许你旋转，缩放，倾斜或平移给定元素。通过修改CSS视觉格式化模型的坐标空间来实现。

translate(移动)

  • 沿着X Y轴移动
  • 不影响其它元素的位置
  • 对行内标签没用(a,input,span等)

在这里插入图片描述
translateX 和 translateY使用也是一样的。

rotate(旋转)

  • 度数的单位是deg (degree)
  • 度数可以是正，负

在这里插入图片描述

scale(缩放)

scale也可以修改中心点

transform
最低0.47元/天 解锁文章
前端猪
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
变换（transform）——移动（translate）、旋转（rotate）、缩放（scale）、扭曲（skew）、基点变换（transform-origin）、动画（animation）
ranran0306的博客
03-17 5951
变换（transform）——移动（translate）、旋转（rotate）、缩放（scale）、扭曲（skew）、基点变换（transform-origin）、动画（animation）
CSS之2D转换(transform)
dwjdj的博客
01-29 240
平移 transform:translate(水平方向移动的距离，垂直方向移动的距离) 如果省略了第二个参数，默认为0 在使用translate()方法移动元素时，基点默认为元素中心点，然后根据指定的X坐标和Y坐标进行平移 transform: translate(400px,200px); 总结： ◆如果在translate()中设置一个值，那么代表当前元素是沿着水平方向移动，如果是正数则向右移...
css3——transform：rotate（旋转）、scale（缩放）、skew（拉伸）、translate（平移）、transform-origin
热门推荐
zyz00000000的博客
09-28 1万+
注意：transform是复合属性，拆开写会替代，先平移再旋转和先旋转再平移的结果是不同的 1. CSS3 转换：transform属性可以对元素进行移动、缩放、转动、拉长或拉伸 注意：Internet Explorer 9 要求前缀 -ms- 版本，Internet Explorer 10, Firefox, 和 Opera支持transform 属性，Chrome 和 Safari 要求...
125_缩放（scale），变形的原点（transform-origin）
述安的博客
08-27 1570
对元素进行缩放： scaleX()水平方向缩放 scaleY()垂直方向缩放 scale双方向的缩放 变形的原点，以前的transform变形都是从中心点开始变形的，默认值就是center，现在可以用transform-origin来改变元素开始变形的位置，比如transform-origin: 20px 20px; ...
一篇文章吃透 CSS3 属性： transition过渡 与 transform动画
weixin_52212950的博客
09-28 1万+
transition 过渡与transform动画 这两个新属性的参数确实比较复杂，它们可以做出 CSS 的一些基础动画效果，平移，旋转，倾角......等等，这些也是我早期学习 CSS 的难记易忘之处，今天给大家详细总结出来。一：transition 过渡transition 可以做出 CSS 的过渡效果，例如要过渡的属性名称，要过渡的时间，过渡的延迟等待时间，过渡的速度变化（过渡类型）
设置元素旋转中心点(transform-origin)
m0_62800060的博客
12-10 1212
transform-origin 基础语法 transform-origin: x y; 重要知识点 注意后面的参数 x 和 y 用空格隔开 x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center 还可以给 x y 设置像素或者方位名词(top、bottom、left、right、center) ...
CSS3特效之转化（transform）和过渡（transition）
bingkingboy的博客
04-17 1万+
在对动画深入之前，我们需要先了解它的一些特性，CSS3的转化（transform）和过渡（transition）。有人可能会有疑问，CSS3动画不是只有animation一个属性吗？怎么又和转化（transform）和过渡（transition）扯上关系了，其实并非如此，转化（transform）属性让动画的变换多元化，而过渡（transition）属性是动画中的一种表现形式，也可以说成是动画一个版
随手记——css3 2D转换（transform）
01-08
css3 2D转换（transform） 位移（translate） 旋转（rotate） 转换中心点（transform-origin） 缩放（scale） 2D转换综合写法 正文 __start： 位移（translate） 语法 说明 transform:translate(x,y) 元素在x...
CSS3 3D立方体效果示例－transform也不过如此
09-27
在本文中，我们将深入探讨CSS3的`transform`属性以及与3D变换相关的其他属性，如`perspective`、`transform-style`和`transform-origin`。 首先，`transform`属性允许我们对元素进行平移（translate）、缩放（scale...
CSS3中的transform属性进行2D和3D变换的基本用法
09-24
主要介绍了使用CSS3中的transform属性进行2D和3D变换的基本用法,文中同时介绍了使用perspective-origin定义初始位置的方法,需要的朋友可以参考下
深入剖析CSS变形transform(3d)
09-24
本文将详细介绍关于transform变形3D的内容，但需以了解transform变形2D为基础。3D变形涉及的属性主要是transform-origin、transform、transform-style、perspective、perspective-origin、backface-visibility。一起...
1.08 css3-动画
10-07
CSS3 动画 - 2D 转换 CSS3 动画中的 2D 转换可以将元素旋转、缩放、移动或倾斜。这些转换可以使用 transform 属性来实现。 1. rotate() 方法 rotate() 方法可以将元素顺时针旋转给定的角度。允许负值，元素将逆...
transform 中的transform-origin
huangbaokang的博客
08-27 862
任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处 示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform-origin</title>
transform(变形)和transform-origin(变形原点)
小小前端的博客
08-15 4528
转载请说明出处，原文地址http://blog.sina.com.cn/s/blog_780a942701014xl8.html transform(变形)和transform-origin(变形原点)的说明： 目前这两个属性得到了除去ie以外各个主流浏览器webkit，firefox，opera的支持，属性名分别为 -webkit-transform，-moz-transform，-o-tr...
JAVAScript：mobile端，基于transform-origin和tranform（scale），实现表格缩放
Justinjiang1314的博客
12-22 2760
需求： 1，实现表格区域的缩放，而不是整个页面。整个页面包含toolbar + table。 其中只缩放table区域 2，已用户操作处进行缩放，而不是固定的某个点，例如中心点，或左上角，笔记缩放时，数据跳动 实现的基本原理： 利用transform-origin，来确定进行缩放的固定点，也就是用户进行缩放的点， 同时利用transform:scale(value)来实现缩放
transform 属性之 transform-origin
u011848617的专栏
01-11 1万+
定义 transform-origin 属性用来设置 transform 变换的基点位置。默认情况下，基点位置为元素的中心点。 语法 transform-origin: x-axis y-axis z-axis 名称 值 描述 x-axis 位置（left、center、right）/ 百分数 / 数值 x 轴基点坐标 y-a
scale和transform-origin控制动画的方向
青阳的博客
05-07 3176
从左进入，右边离开我们将一个 hover 动画分解为 3 个部分：hover 进入状态hover 停留状态hover 离开状态但是，对于一个 hover 效果而言，正常来说，只有初始状态，和hover状态两种。可能我们的代码是这样：div {    xxxx...} div:hover {    xxxx...}对于一个 hover transition 动画，它应该是从：正常状态 -> h...
html5路由如何在nginx上部署（vite+vue3）
最新发布
m0_58002043的博客
07-09 319
我们知道前端常用的有Hash 模式和html5模式的路由，hash模式在nginx上部署不需要额外的操作，而html5模式则需要额外设置，这里介绍下如何在nginx根地址（location / {}）下部署和在非根地址上（location /admin{}）部署。
transform动画
07-28
transform属性可以让元素产生一些常规的2D或3D动画效果，例如旋转、位移、缩放、扭曲等等。常用的transform属性包括transform-origin、translate、rotate和scale等。通过设置这些属性的值，可以实现元素在动画过程中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值