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.



相关文章
|
1天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
1天前
|
前端开发 持续交付 开发工具
详细介绍Git的基本原理、在前端开发中的应用以及如何使用Git来优化团队协作
【6月更文挑战第14天】Git是前端开发中的必备工具,它通过分布式版本控制管理代码历史,支持分支、合并和冲突解决,促进团队协作。在前端开发中,Git用于代码追踪、版本控制、代码审查和持续集成部署,优化团队协作。制定分支策略、编写清晰提交信息、定期合并清理分支以及使用Git钩子和自动化工具能进一步提升效率。理解并善用Git,能有效提升前端项目的质量和开发效率。
11 3
|
1天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
9 2
|
9天前
|
前端开发
前端React篇之React setState 调用的原理、React setState 调用之后发生了什么?是同步还是异步?
前端React篇之React setState 调用的原理、React setState 调用之后发生了什么?是同步还是异步?
|
10天前
|
存储 前端开发 Windows
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
|
21天前
|
前端开发 Java
前端面试题01(css)
前端面试题01聚焦CSS,涵盖选择器优先级、隐藏元素方法、px与rem差异、重绘与重排解释、元素居中技巧及可继承属性。还探讨了CSS预处理器SASS和LESS的特性。文章提供实例代码展示居中布局的多种实现方式。鼓励读者点赞和支持。
15 0
|
26天前
|
前端开发
前端 CSS 经典:SVG 描边动画
前端 CSS 经典:SVG 描边动画
29 0
|
26天前
|
前端开发
前端 CSS 经典:好看的文字阴影
前端 CSS 经典:好看的文字阴影
20 0
|
26天前
|
前端开发
前端 CSS 经典:模特换装效果
前端 CSS 经典:模特换装效果
40 0
|
26天前
|
前端开发 算法
前端 CSS 经典:filter 滤镜
前端 CSS 经典:filter 滤镜
26 0