CSS3 transform2D转换平移旋转以及缩放

最新推荐文章于 2023-09-05 14:24:42 发布
最新推荐文章于 2023-09-05 14:24:42 发布
阅读量857 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TXW6666/article/details/105745900
版权

transform本质上是一系列变形函数，分别是translate位移，scale缩放，rotate旋转，skew扭曲 、

translate(x,y) 设置盒子位移
scale(x,y) 设置盒子缩放
rotate(deg) 设置盒子旋转
skew(x-angle,y-angle) 设置盒子斜切

translate位移

translate位移系列中用于2D的有：translate，translateX，translateY
translateX X轴平移，translateY Y轴平移
translate中有个值 一个表示X轴 一个表示Y轴 0便是不发生平移

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			div {
			    width: 100px;
			    height: 100px;
			    background-color: royalblue;
				transform:translate(120px,120px) /*X轴和Y轴均平移120px*/
			}
			div:hover {
			    width: 400px;
			    
		</style>
	</head>
	<body>
		<div></div>

	</body>
</html>

在这里插入图片描述

如果只写一个值那么只有X轴为位移 Y轴不发生改变 相当于 translateX(120px)

	transform:translate(120px) /*只有X轴平移120px*/

在这里插入图片描述

translate位移，有点类似于position:relative属性。都是改变相对与原来位置的距离；
设置绝对定位

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		div {
			position: absolute;
			top: 100px;
			left: 100px;
		    width: 100px;
		    height: 100px;
		    background-color: royalblue;
			/*transform:translateX(120px) ;*/
		}
	</style>
</head>
<body>
	<div></div>

</body>
</html>

在这里插入图片描述

然后添加 transform:translateX(100px)；

在这里插入图片描述
该盒子相对与原来位置 在X轴右平移了

如果添加 transform:translateX(-100px)；则相对于原来位置在X轴上向左平移100px
在这里插入图片描述

scale缩放

scale缩放系列中用于2D的有：scale，scaleX，scaleY
和平移一样scaleX表示X轴上的变化，scaleY表示Y轴上的变化
scale（X，Y）也有两个值 一个表示X轴 一个表示Y轴 同样也可以设置一个值 但和translate不同的是设置一个值表示X轴和Y轴都发生改变
默认值是1 表示不缩放 0表示完全缩小（看不见了） 2表示放大到原来的2倍
值小于1表示缩小 值大于1表示放大

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		div {
			position: absolute;
			top: 100px;
			left: 100px;
		    width: 100px;
		    height: 100px;
		    background-color: royalblue;
			transform:scale(2) ;
		}
	</style>
</head>
<body>
	<div></div>

</body>
</html>

在这里插入图片描述

如果只缩放X轴，可以使用scaleX(.5)等同于scale(.5, 1)。Y轴也是一样的
设值Y轴缩放X轴不缩放

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		div {
			position: absolute;
			top: 100px;
			left: 100px;
		    width: 100px;
		    height: 100px;
		    background-color: royalblue;
			transform:scale(1,.5) ;/*等同于scaleY(0.5)*/
		}
	</style>
</head>
<body>
	<div></div>

</body>
</html>

在这里插入图片描述

同过这我们可以想到如果放大X轴 缩小Y轴

transform:scale(2,.5) ;
在这里插入图片描述

其实scale是可以使用负数值得

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		.box{
			position: absolute;
			top: 100px;
			left: 100px;
		    width: 100px;
		    height: 100px;
		    background-color: royalblue;
		}
		div{position: absolute;
			top: 50px;
			left: 50px;
		    width: 50px;
		    height: 50px;
		   	background-color: red;
		  }
		
		    
	</style>
</head>
<body>
	<div class="box">
		<div>
			
		</div>
	</div>

</body>
</html>

没有添加缩放属性得时候
在这里插入图片描述

如果加上 transform:scale(-1,1) ;X轴设置了－１　Y轴设置１
在这里插入图片描述
原本 右边得红色小方块 变到了左边 这就相当于3D 下得X轴旋转180deg 产生了颠倒 把原本背对屏幕得一面 翻转到了面对屏幕

rotate旋转

rotate旋转系列中用于2D的有：rotate（rotateX ， rotateY，rotateZ都是3D旋转）
只能设单值。正数表示顺时针旋转，负数表示逆时针旋转，说到旋转就需要说一下transform-origin

transform-origin用来设置旋转缩放等中心点坐标，

所有元素都有一个中心原点，默认2D中，元素的中心原点位于X轴和Y轴的50%处。
位移、缩放、旋转、倾斜都是可以通过 transform-origin用来设置旋转缩放等中心点坐标
transform-origin属性取值跟背景 位置background-position属性取值相似 都可以采用 关键字和像素值

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		div {
			position: absolute;
			top: 100px;
			left: 100px;
		    width: 100px;
		    height: 100px;
		    background-color: royalblue;
			transform:rotate(50deg); /*以原点为中心向右旋转50°*/
		}
	</style>
</head>
<body>
	<div></div>

</body>
</html>

没有设置 transform-origin 以元素得中心点为原点
在这里插入图片描述
设置 transform-origin:0px 0px;以元素得右上角为原点
在这里插入图片描述

平移旋转以及缩放这些变化都可以通过transition（过度） 以及animation（动画）属性产生动画效果在这里插入图片描述
效果代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		div{
			position: absolute;
			top: 100px;
			left: 100px;
		    width: 100px;
		    height: 100px;
		    background-color: royalblue;
		   	transition: all 1s;
		}
		 div:hover{
		 	transform:rotate(360deg) scale(2);
		 }
	</style>
</head>
<body>
		<div>
		</div>
</body>
如梦灬初醒
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
随手记——css3 2D转换（transform）
01-08
css3 2D转换（transform） 位移（translate） 旋转（rotate） 转换中心点（transform-origin） 缩放（scale） 2D转换综合写法 正文 __start： 位移（translate） 语法 说明 transform:translate(x,y) 元素在x轴移动x像素，y轴移动y像素 transform:translateX(n) 元素在x轴移动n像素 transform:translateY(n) 元素在y轴移动n像素 注： X和Y代表的二维坐标； 里面的参数可用百分比，也可用像素； 参数用百分比时，移动的距离是利用盒子
VTK笔记——空间几何变换(Transform)，平移、旋转和缩放
Andy的专栏
12-04 2万+
先看一张图，下图是一个三维的Cow, 试想在使用中，是否会遇到如下场景？ 1.将Cow移动到某个位置 2.旋转Cow到背面 3.想看清楚Cow面部的细节，改变它大小等等 可能你会说，这还不简单，通过操作相机就好了。操作相机，使得相机的空间位置发生了变化，但对三维物体的空间位置并没有改变，要想改变模型的空间位置，就需要对模形本身做空间变换。 空间变换的基础知识 变换矩阵（Trans...
CSS-9 transform语法与常用函数；平移/旋转/倾斜 函数；css居中-水平居中,垂直居中,上下左右居中；transition过渡动画；Animation
qq_54075517的博客
05-08 1359
transform语法与常用函数；平移tranlate(X,Y)/旋转rotate(X,Y)/设置原点tansform-origin(X,Y)/倾斜skew(X,Y) 函数；css居中-水平居中,垂直居中,上下左右居中；transition过渡动画；Animation
transform（平移、旋转、缩放、3d转换）、渐变、动画笔记
Yous的博客
07-04 1万+
2. 表单属性–交互表单属性 CSS3 1. 选择器 1.1 属性选择器 1.2 结构伪类选择器 1.3 伪元素选择器 2. css属性 2.1 平面转换transform 2.1.1 平移 平移还在原来的文档流，平移后的位置也可以重叠。 2.1.3 多重转换 2.1.5 渐变背景 案例1 给图片蒙上渐变色 流程如下： 主要是平移和伪元素的使用 给盒子的和分别装上图片的左半和右半，设置盒子，悬停时将图片移开。 可以给盒子加隐藏移开时的超出部分。w3school 3
CSS设置标签、图片，放大、缩小、旋转、移动、倾斜(transform)
qq_57340195的博客
01-21 2万+
CSS设置标签、图片，放大、缩小、旋转、移动、倾斜(tranform) 1.缩小和放大属性（scale） 格式：tranform：缩小类型（数值）； 注意：缩小和放大都是 scale ； 其中的值（0~1）代表缩小；大于1代表放大。其中0代表缩小到没有，1代表不变。 tranform:scale(0.5) /*整体缩小到原来的一半*/ tranform:scale(2) /*整体放大到原来的一半*/ tranform:scaleX(0.5) /*宽缩小到原来的一半*/
CSS3中的变形处理——transform功能（旋转、缩放、倾斜、移动）
xuan的博客
08-23 2万+
1 transform属性 在CSS3中，可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的变形处理。 （1）浏览器支持 到目前为止：Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上浏览器支持该属性。  2 旋转 使用rotate方法，在参数中加入角度值，角度值后面跟表示角度单位的“deg”文字即可，旋转方向为顺时针方向。...
41.css3设置变形(平移和旋转)
越努力越幸运的博客
05-04 727
文章目录css3设置变形css3设置平移（translateX、translateY、translateZ） css3设置变形 变形是指通过css来改变元素的形状或位置 变形不会影响到页面布局 使用transform来设置变形效果 css3设置平移（translateX、translateY、translateZ） 使用transfrom设置变形， 值translateX让元素沿着x轴平移 值translateY让元素沿着Y轴平移 值translateZ让元素沿着Z轴平移 详见代码，如下： <
transform等比缩放后，实际占用空间修改
qq_43527485的博客
02-08 3100
transform使用
transform的缩放和移动
weixin_51937505的博客
03-17 2414
css3 transform的基础使用 translateX：水平方向的移动距离 translateY：垂直方向的移动距离 position: absolute; top: 200px; left:50%; transform: translateX(-50%); 缩放 scale 参数表示缩放倍数； 一个参数时：表示水平和垂直同时缩放该倍率 两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍
css3学习之2D转换功能详解
01-19
CSS3提供了2D转换功能，能够对元素进行移动、缩放和转动等功能。 2D转换的属性名为transform，使用方法为transform:method(value)。 2D转换方法有translate、scale、rotate、skew、matrix，还有基于这些分支出的...
CSS3之2D与3D变换的实现方法
12-13
css3实现了对元素执行2D平面变换，以及视觉上的3D空间变换，2D变换平时可能用的较多，3D效果也能锦上添花； 关于坐标轴 初中数学的几何学里我们便开始接触坐标轴，最...包括平移 translate() ，旋转 rotate() ，缩放 s
css3 transform属性详解
12-13
CSS3变形是一些效果的集合，比如平移translate() 、旋转rotate()、缩放scare()和倾斜skew()效果，每个效果都被称作为变形函数（Transform Function）,它们可以操控元素发生旋转、缩放、和平移等变化。 CSS3的2D ...
CSS中图片旋转超出父元素解决办法
努力的nana
09-05 806
下面的两种解决办法都会导致图片缩小，可以给图片进行初始化的宽高设置。
Transform的属性及使用
热门推荐
小谭鸡米花的博客
10-23 3万+
前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、transform是什么？ Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。 二、transform的属性值 假如有一个盒子，高度两百像素，宽度两百像素，设置一个背景颜色，下面来用这个盒子来观察transform每个属性值的效..
html中2d变形兼容性,CSS3(3)---2D变形(transform)
weixin_29045001的博客
06-20 590
CSS3(3)---2D变形(transform)2D变形是CSS3中具有颠覆性的特征之一，它常用的属性有:移动(translate)、缩放(scale)、旋转(rotate)、倾斜 (skew)。一、2D变形语法1、移动 (translate)移动的属性: translatetranslate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)translateX(x)仅水平方向移动...
transform放大元素后，父级元素不出现滚动条的解决方案
qq_40299140的博客
01-11 7860
首先讲一下自己对transform scale 的理解，transform scale 放大元素，元素本身的width与height不变，并不会影响页面布局，相当于是在元素上添加了一个放大镜。本质上是放大像素点，所以当放大图片时图片会出现模糊，这里也顺带提一下解决方案，当元素放大时去调用高清图片，不要一开始就加载大图，影响页面加载速度。 使用transform默认的作用中心是元素的中心点，通过 ...
transform导致溢出_html – 使用转换SCALE时CSS防止溢出
weixin_29505425的博客
02-11 436
我在使用transform时遇到问题：scale();基本上,我在具有溢出的图像上使用此缩放：隐藏检查这个小提琴的实时动作：https://jsfiddle.net/ns3vm3x6/HTML i want this image to scale just like #example no. 2. how to achive this one? CSS#container1 {width:...
css中如何让元素在父元素中水平或垂直居中
qq_46472106的博客
08-09 649
如何让元素在父元素中水平或垂直居中 一、行内元素：text-align：center line-height：height 二、块级元素： 1.给父元素设置display:flex属性 align-items:center justify-content:center 2.给父元素设置display：flex属性，给子元素设置margin：auto 3.给父元素设置定位属性，子元素设置绝对定位，并且使用配合属性left:50%;top:50%;让子元素左上角移动到父元素中心位置；然后再让子元素使用margi
使用python绘制好看的箱形图、柱状图、散点图
最新发布
05-26
使用python绘制好看的箱形图、柱状图、散点图
css transform3d
08-30
通过使用transform属性的rotateX、rotateY、rotateZ、translateX、translateY、translateZ、scaleX、scaleY、scaleZ等方法，可以实现元素的旋转、平移、缩放等3D效果。 在使用CSS transform 3D时，可以通过设置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值