Transform变换基础用法全解

最新推荐文章于 2024-04-22 20:04:35 发布

林钟雪

最新推荐文章于 2024-04-22 20:04:35 发布

阅读量441

点赞数 12

分类专栏： CSS 文章标签： javascript 前端开发语言学习 html5 css

本文链接：https://blog.csdn.net/Lin_Zhong_/article/details/136649658

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS的transform属性，包括2D转换中的transition、rotate、translate和scale，以及3D转换中的rotate3d和translate3d。这些技术在网页设计中用于实现元素的动态效果和空间布局。

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

一、简介

1、transform变换简介

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

二、属性

1、2D转换


	0、transition
	    //用于设置变换的过渡属性和时间
	    //语法：
	    //    transition:all .3s
	    //    all意味着所有属性都参加过渡，若为none则没有属性参与过渡
	    //    也可输入需要过渡的属性名称列表，多个属性之间使用逗号分隔
	    
	1、rotate
	    //用于按照某角度旋转
	    //如：
	        transform:rotate(60deg)
	    //注：
	    //    1、使用transform-origin可以指定旋转点
	    //       语法：transform-origin:x y (x y是相对于左上角而言的，可以使用百分比)
	    //    2、默认旋转中心为中心的，即transform-origin:50% 50%
	    
	2、translate
	    //用于按照某轴平移
	    //如：
	        transform:translate(x,y)
	        //朝两个轴平移
	        transform:translateX(n)
	        transform:translateY(n)
	    //注：
	    //    1、移动的元素不会影响到其他元素的位置
	    //    2、参数可以是带单位的数值或百分比，百分比是相对于自身元素的尺寸而言
	    //    3、对行内标签不起效果
	    
	3、scale
	    //用于控制元素放大或缩小
	    //如：
	        transform:scale(x,y) | (n) 
	        //使元素按照x和y轴缩放，只有一个参数表示等比例缩放
	        transform:scaleX(x)
	        transform:scaleY(y)

2、3D转换


	1、rotate3d
	    //有四个参数，前三个定义XYZ旋转轴，最后一个指定旋转程度
	    //如：
	        transform: rotate3d(0,1,0,180deg);
	2、translate3d
	    //有三个参数，表示向x,y,z三个方向平移
	    //如：
	        transform:translate3d(10px,10px,10px)