CSS3动画属性之Transform

简介: CSS3动画属性之Transform

一、transform 属性(形状变换)

transform 属性:对元素应用 2D 或 3D 转换。该属性允许我们对元素进行移动、缩放、旋转或倾斜。

1.1 translate 移动

translate 方法用于从当前位置移动一个元素。

语法

translateX() 向 x 轴移动元素 translateY() 向 y 轴移动元素 translateZ() 向 z 轴移动元素 translate3d(x, y, z) 简写:translate(x, y) --> translate(x, y)


小试牛刀

/* 多个属性值之间用“空格”分隔! 负号表示相反方向*/
transform: translateX(100px) translateY(50px);
/* transform: translate(100px, 50px) */

1688209239809.png

1.2 rotate 旋转

rotate 方法通过指定角度参数对元素进行旋转。

语法

rotateX() rotateY() rotateZ() rotate3d(x,y,z) 简写:rotate() --> rotateZ()

小试牛刀

/* 向顺时针旋转方向旋转90度,负号表示逆时针方向 */
transform: rotate(90deg)
/* transform: rotateZ(90deg) */

1688209263197.png

1.3 scale 缩放

scale 方法和 translate 方法相似,都有3个方向的变换。它的缩放基数为1,它的参数大于1就放大,小于1就缩小。

语法

scaleX() scaleY() scaleZ() scale3d(x, y, z) 简写:scale(x, y) | scale(n) --> scale(n, n)

小试牛刀

/* transform: scaleX(3) scaleY(2); */
transform: scale(3, 2);

1688209284879.png

1.4 skew 倾斜

skew 方法可以让元素沿着 x 轴或者 y 轴倾斜变形。

语法

skewX(ndeg) skewY(ndeg) 简写:skew(x, y)

小试牛刀

/* transform: skewX(30deg) skewY(10deg); */
transform: skew(30deg, 10deg);

1688209306622.png

二、transform-origin 元素基点

元素的默认基点就是自身的中心位置,所以在移动、旋转和倾斜时均是以元素自身的中心位置为原点进行的。 那么当我们想要让元素按照一定的参照点进行形状变换的时候,就要用到 transform-origin 属性了。

语法

语法: transform-origin: x  y z; x: x轴水平方向的取值,可以是 left | center | right | length | % y: y轴垂直方向的取值,可以是 top | center | bottom | length | % z: z轴方向的取值,是length 1、top left | left top 等价于 0 0 | 0% 0%

2、top | top center | center top 等价于 50% 0

3、right top | top right 等价于 100% 0

4、left | left center | center left 等价于 0 50% | 0% 50%

5、center | center center 等价于 50% 50% 0(默认值)

6、right | right center | center right 等价于 100% 50%

7、bottom left | left bottom 等价于 0 100% | 0% 100%

8、bottom | bottom center | center bottom 等价于 50% 100%

9、bottom right | right bottom 等价于 100% 100%

小试牛刀

(1) transform-origin: top left;

1688209324065.png

(2) transform-origin: right;


1688209339833.png



(3) transform-origin: 50% 50%;


1688209356781.png

目录
相关文章
|
1月前
|
机器学习/深度学习 前端开发 JavaScript
|
2月前
|
前端开发
CSS属性:盒子模型
CSS属性:盒子模型
33 0
|
2月前
|
前端开发
CSS属性
CSS属性
30 0
|
26天前
|
前端开发 搜索推荐 UED
实现 CSS 动画效果的兼容性
【10月更文挑战第16天】实现 CSS 动画效果的兼容性需要对不同浏览器的特性有深入的了解,并采取适当的策略和方法。通过不断的实践和优化,你可以在各种浏览器上创造出流畅、美观且兼容的动画效果,为用户带来更好的体验。在实际开发中,要密切关注浏览器的发展动态,及时掌握最新的兼容性技巧和解决方案,以确保你的动画设计能够在广泛的用户群体中得到良好的呈现。
103 58
|
5天前
|
Web App开发 前端开发 JavaScript
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
18 1
|
18天前
|
Web App开发 前端开发 iOS开发
css所有缩写属性,CSS属性简写整理
css所有缩写属性,CSS属性简写整理
16 1
|
30天前
|
前端开发 JavaScript API
探索 CSS Houdini:轻松构建酷炫的 3D 卡片翻转动画
本文通过构建一个 3D 翻卡动画深入探讨了 CSS Houdini 的强大功能,展示了如何通过 Worklets、自定义属性、Paint API 等扩展 CSS 的能力,实现高度灵活的动画效果。文章首先介绍了 Houdini 的核心概念与 API,并通过构建一个动态星空背景、圆形进度条以及交互式 3D 翻卡动画的实际示例,展示了如何利用 CSS Houdini 赋予网页设计更多创造力。最后,还演示了如何将这种 3D 翻卡效果集成到公司网站中,提升用户体验。CSS Houdini 的创新能力为网页设计带来了前所未有的灵活性,推动了前端开发迈向新的高度。
26 0
探索 CSS Houdini:轻松构建酷炫的 3D 卡片翻转动画
|
2月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
33 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
1月前
|
前端开发
CSS 中哪些属性可以继承
在 CSS 中,属性分为可继承与不可继承。可继承属性会在子元素中沿用父元素的样式设定。常见可继承属性包括:文本属性(如 `font-family`, `color`),列表属性(如 `list-style`),表格布局属性(如 `border-collapse`),以及其他如 `visibility` 和 `direction` 等属性。正确理解这些属性有助于更高效地进行样式设计。
|
18天前
|
前端开发
css简写属性
css简写属性
24 0

热门文章

最新文章