transform-origin : 在不同的 transform 属性中有不同的含义

最新推荐文章于 2022-06-21 18:49:32 发布

爱吃鸡蛋的程序员

最新推荐文章于 2022-06-21 18:49:32 发布

阅读量485

点赞数

分类专栏：工作积累文章标签： css3

本文链接：https://blog.csdn.net/weixin_34865745/article/details/113059930

版权

本文探讨了CSS3的transform-origin属性如何影响不同变换效果，如缩放和旋转。通过改变该属性，可以指定元素变换的基点，实现自定义动画效果。默认情况下，变换从元素中心开始，但可以通过设置为top等值来改变起始位置，从而创建更丰富的视觉动态。

摘要由CSDN通过智能技术生成

今天做了一个 css 菜单的特效, 结果发现默认的缩放是重中心到四周扩散的, 然后没有我们要的下拉效果, 利用transform-origin 这个 css 字段可以设置我们的动画效果是从哪里开始, 默认是从中心作为点,进行缩放动画, 如果我们设置成 top 就定位最上面边是我们动画开始的基点从上到下进行我们的动画

1. 在 `transform: translate` 中的含义: 从 `transform-origin` 处开始进行 `transform`

具体情况代码


<!-- 菜单特效 -->
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			* {
    
				padding: 0px