12.CSS3 2D转换transform

已于 2024-03-07 13:55:11 修改
阅读量323 收藏 8
点赞数 9
分类专栏： 前端自学 文章标签： css
于 2024-03-07 13:53:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55598229/article/details/135002946
版权

一、2D转换之移动translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位

1.语法

2.重点

二、2D转换之旋转rotate

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

1.语法

2.重点

三、2D转换中心点 transform-origin

四、2D转换之缩放scale

四、2D转换综合写法

五、2D转换总结

小孩子才做选择呢
关注
  • 9
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
随手记——css3 2D转换（transform）
01-08
css3 2D转换（transform） 位移（translate） 旋转（rotate） 转换中心点（transform-origin） 缩放（scale） 2D转换综合写法 正文 __start： 位移（translate） 语法 说明 transform:translate(x,y) 元素在x...
css3学习之2D转换功能详解
09-27
在CSS3中，2D转换是一个强大的特性，它允许开发者对网页元素进行一系列二维空间内的图形变换，包括平移、旋转、缩放和倾斜。这一功能显著提升了网页设计的动态性和交互性。本文将深入探讨CSS3中的2D转换功能，帮助你...
jquery.css-transform:用于变换操作和动画支持的轻量级 jQuery 插件
06-05
jQuery CSS Transform 是一个轻量级的 jQuery 插件，它为支持 CSS 转换的浏览器添加了转换操作和动画支持。 它对于在支持 CSS 转换但不支持 CSS 转换（例如 IE9）的浏览器上为 CSS 转换属性设置动画特别有用。 它...
浅谈：CSS3的渐变以及2D转换
01-08
CSS3的2D转换2.1 transform2.2 rotate() 方法2.3 skew() 方法2.4 scale() 方法2.5 translate() 方法3. CSS3过渡3.1 transition3.2 pointer-events3.3 backface-visibility 1. CSS3渐变 CSS3 Gradient 分为线性渐变...
html设计（两种常见的充电效果）
2301_81704123的博客
07-12 2825
title>充电效果
CSS实现table表格：隔行换色的效果
pan_junbiao的博客
07-12 309
表格是网页中十分重要的组成元素。表格用来存储数据，包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号表示。定义表格光使用是不够的，还需要定义表格中的行、列、标题等内容。在CSS中，可以使用 nth-child 选择器来实现隔行换色。该选择器用于匹配父元素中的特定子元素，nth-child(odd) 可以匹配奇数行，nth-child(even) 可以匹配偶数行。使用CSS样式实现 table 表格隔行换色的效果。
css-grid布局(栅格布局)
YogaMiller的博客
07-15 532
* 数字和命名搭配搭配也可, 1 / t 注意如果是一个位置的话可省略, 比如 1 / 2 2 / 3 这里的2 3就可以省略*//* [d]150px 100px;搞不懂为什么加个命名就变小了.... *//* 目前喜欢这种的方式, 比较直观 . 表示这个位置空着 */grid 一个比flex更强大的布局,适合做整体布局。/* g-r-start g-r-end 的简称 *//* 相同的名字 代表相同的区域 */fr 只能放在第二个参数。
HTML5+CSS3小实例：纯CSS实现奥运五环
艾恩小灰灰的博客
07-15 143
实例：纯CSS实现奥运五环。技术栈：HTML+CSS。
CSS实现从上往下过渡效果
m0_56164131的博客
07-11 228
要实现一个从上往下显示的过渡效果，可以使用CSS的@keyframes规则来创建一个动画，使得元素在垂直方向上逐渐改变其位置。
scss 语法
True Truth
07-14 115
scss 是 css 的超集， 主要是引入了 变量， 函数， 继承， 算术计算。
CSS-0_3 CSS和单位
最新发布
乡亲们啊的博客
07-15 561
直到iphone4诞生，彻底改变人们对“上网”这个行为的思维方式。原来我们可以在一个方砖大小的设备上访问页面，那我们将来是不是可以在一个几十上百寸的巨幕上访问页面？在一张A4纸大小的板子上访问页面？人们用千奇百怪的设备访问你的网页，这时候如果你依然墨守成规，那就只能在用户糟糕体验之后的唾弃声中抱着你的电脑屏幕退场。
CSS基础
lvshihao_的博客
07-15 406
项目上线时，我们会通过工具将【展开风格】的代码，变成【紧凑风格】，这样可以减小文。：选择器与声明块之间，属性名与属性值之间，均有一个空格，理论上能省略，但最好。外部样式的优势：样式可以复用、结构清晰、可触发浏览器的缓存机制，提高访问速。件体积，节约网络流量，同时也能让用户打开网页时速度更快。行内样式表，只能控制当前标签的样式，对其他标签无效。：最后一个声明后的分号理论上能省略，但最好还是写上。1. 内部样式、外部样式，这二者的优先级相同。添加样式，实现了：结构与样式的分离。的思想，不推荐大量使用，只。
CSS图像不透明度的艺术：探索透明度控制的无限可能
Lesleyhnj的博客
07-15 74
在网页设计中，图像的不透明度（Opacity）和透明度（Transparency）是两个关键的概念，它们不仅影响着页面的视觉效果，还能增强用户体验，创造丰富的交互效果。通过调整图像的不透明度，设计师可以实现元素间的层次感，营造柔和或梦幻的氛围，甚至在动画和过渡效果中发挥重要作用。本文将从不同角度深入探讨CSS中控制图像不透明度的技术，帮助你掌握这一技能，提升网站的美学品质。定义与作用： 属性允许我们改变HTML元素的不透明度，取值范围是0到1之间，其中0表示完全透明，1表示完全不透明。这个属性应用于整个元素
CSS变换
m0_63165331的博客
07-14 459
本文主要讲述CSS中的变换相关内容。
前端面试题(CSS篇八)
weixin_74068942的博客
07-12 1167
资料参考:《CSS 隐藏元素的八种方法》
CSS 中的 ::before 和 ::after 伪元素
m0_65029152的博客
07-11 929
本文主要记录CSS中的 ::before 和 ::after 伪元素的相关内容和使用场景；
【CSS in Depth 2 精译】第三章 文档流与盒模型 + 3.1 常规文档流
PeacefulWinter的博客
07-12 1436
本篇是《CSS in Depth》全新第二版第三章3.1小节的上半部分内容，在前一版基础上做了大幅更新。主要介绍了常规流的相关概念，并结合实例讨论了常规流下的文本居中样式的设置及注意事项。非常适合基础较薄弱的朋友参考和练手，建议收藏。
内容长度不同的div如何自动对齐展示
PanDa____的博客
07-15 111
css 实现 无固定高度且同级元素可对齐展示
html表格账号密码备忘录：表格内容将通过JavaScript动态生成。点击查看密码10秒关闭
lulei5153的博客
07-13 332
【代码】html表格账号密码备忘录：表格内容将通过JavaScript动态生成。点击查看密码10秒关闭。
css transform3d
08-30
CSS transform 3D是一种CSS属性，用于实现在网页中对元素进行3D转换和动画效果。通过使用transform属性的rotateX、rotateY、rotateZ、translateX、translateY、translateZ、scaleX、scaleY、scaleZ等方法，可以实现...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值