CSS3 转换,深入理解Flutter动画原理,前端基础图形

简介: CSS3 转换,深入理解Flutter动画原理,前端基础图形
height: 100px;
border: 1px solid red;
background-color: #cccccc;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}


2D 缩放 - scale()


scale() 方法用于改变元素的尺寸。

  • 根据给定的高度和宽度。

scale(x) 或者 scale(x,y)

  • 一个参数时,第二个参数默认和第一个一样。

可取值

-  默认为1

-  缩小:0到1之间的数值。

-  放大:大于1的数值。

也可以使用单向缩放函数

-  scaleX(x)

-  scaleY(y)

案例代码


2D 旋转 - ratate()


rotate() 方法用于旋转元素。

  • 根据原点,将元素按照顺时针旋转给定的角度。
  • 允许负值,元素将按逆时针旋转。

rotate(deg)

案例代码


2D 倾斜 - skew()


skew() 方法用于让元素倾斜。

  • 以原点位置,围绕 X 轴和 Y 轴按照一定角度倾斜。

- 可能会改变元素形状。

skew(x) 或者 skew(x,y) ,取值为角度。

也可以使用单向倾斜函数

  • skewX(x)
  • skewY(y)

案例代码


3D 转换 - perspective


perspective 属性定义 3D 元素距视图的距离,单位像素。

  • 为元素定义 perspective 属性时,子元素会获得透视效果,而不是元素本身。
  • 只影响 3D 转换元素。

浏览器兼容性

  • Chrome 和 Safari 支持替代的 -webkit-perspective 属性。

案例代码

Lorem ipsum.



相关文章
|
3月前
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
26天前
|
前端开发
|
26天前
|
前端开发
|
26天前
|
前端开发 JavaScript
|
26天前
|
XML 前端开发 JavaScript
|
26天前
|
前端开发 容器
|
2月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
78 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
3月前
|
前端开发 开发者 UED
《前端技术基础》第02章 CSS基础【合集】
层叠样式表(Cascading Style Sheets,简称CSS)是一种用于描述网页视觉表现的语言。该语言与HTML协同工作,其中HTML负责构建网页的结构,而CSS则负责定义网页的外观和格式。CSS通过一系列规则来实现样式的应用,这些规则由选择器(Selectors)和声明块(Declaration Blocks)构成。选择器的作用是明确指出哪些HTML元素将受到特定样式规则的影响,而声明块则包含了具体的样式声明,这些声明定义了元素的视觉属性和相应的值。
96 1
|
4月前
|
移动开发 缓存 前端开发
深入理解前端路由:原理、实现与应用
本书《深入理解前端路由:原理、实现与应用》全面解析了前端路由的核心概念、工作原理及其实现方法,结合实际案例探讨了其在现代Web应用中的广泛应用,适合前端开发者和相关技术人员阅读。
|
5月前
|
前端开发 开发者
本文将深入探讨 BEM 的概念、原理以及其在前端开发中的应用
BEM(Block-Element-Modifier)是一种前端开发中的命名规范和架构方法,旨在提高代码的可维护性和复用性。通过将界面拆分为独立的模块,BEM 提供了一套清晰的命名规则,增强了代码的结构化和模块化设计,促进了团队协作。本文深入探讨了 BEM 的概念、原理及其在前端开发中的应用,分析了其优势与局限性,为开发者提供了宝贵的参考。
166 8
下一篇
oss创建bucket