web前端开发——进阶css（平面转换）

已于 2023-04-12 00:02:17 修改
阅读量121 收藏
点赞数
分类专栏： web前端 文章标签： css3 前端 css
于 2023-04-11 23:53:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59451453/article/details/130087724
版权

目录

一.平面转换

1.位移：使用translate实现元素位移效果

2.旋转：平面旋转实现元素旋转效果（角度单位是：deg）

3.缩放：使用scale改变元素的尺寸 

一.平面转换

平面转换概念：使用transform属性实现元素的位移、旋转、缩放等效果。

1.位移：使用translate实现元素位移效果

  1. 语法：transform: translate(水平移动距离,垂直移动距离)；
  2. 取值(正负均可)：像素单位数值；百分比(参照物为盒子自身尺寸)
  3. 注意: X轴正向为右, Y轴正向为下
  4. 技巧：translate()如果只给出一个值, 表示x轴方向移动距离；单独设置某个方向的移动距离: translateX() & translateY()

 实现代码：

        1.位移—水平/垂直移动

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>平面转换-位移</title>
		<style>
			.father{
				width: 300px;
				height: 300px;
				margin: 50px auto;
				border: 1px solid black;
				
			}
			.son{
				width: 100px;
				height:100px;
				background-color: pink;
				translate: all 0.5s;   /*位移慢慢变化*/
			}
			/*鼠标移到父盒子 ，son改变位置*/
			.father:hover .son{
				transform: translate(50px,100px);	 	/*水平50 垂直100*/
				transform: translate(-50px,-100px);
				transform: translate(-50%,-100%);    /* %参考自身像素决定 */
			    transform: translate(50px);      /* 只水平移动50px */
				transform: translateX(50px);    /* 只水平移动50px */
				transform:translateY(100px);   /* 垂直移动 */
			}
			
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son"></div>
	    </div>
	</body>
</html>

        2.位移—绝对居中

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>平面转换-位移</title>
		<style>
			.father{
				width: 500px;
				height: 300px;
				margin: 100px auto;
				border: 1px solid black;
				
			}
			.son{
				/* 绝对定位居中*/
				position: absolute;
				left: 50%;
				top: 50%;
			
				
				/* 位移的方法 ：百分比从参考盒子自身的大小 计算结果*/
				transform: translate(-50%,-50%);
				
				width: 200px;
				height:100px;
				background-color: pink;
				
			}	
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son"></div>
	    </div>
	</body>
</html>

         3.双开门案例

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>图片双开门案例</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 1000px;
				height: 600px;
				margin: 0 auto;
				background:url("./image/DSCN0013.JPG");	
				overflow: hidden;
			}
		    /* 伪元素: */
			.box::before,
			.box::after{
				float: left;
				content:'' ;
				width: 50%;
				height: 600px;
				background-image: url("./image/DSCN0028.JPG");
				transition: all 0.5s;
			}
			/*单独控制after的背景图位置*/
			.box::after{
				background-position: right 0;
			}

			/*鼠标移入box，before向左移动 100%*/
			.box:hover::before{
				transform: translate(-100%);
				
			}

			/*鼠标移入box，after右侧移动*/
			.box:hover::after{
				transform: translateX(100%);
			}
			
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

2.旋转：平面旋转实现元素旋转效果（角度单位是：deg）

        1.平面旋转：transform:rotate( )

        实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>旋转效果</title>
	<style>
		img{
			width: 250px;
			transition: all 2s;
		}
		img:hover{
			/* 顺时针旋转 */
			transform: rotate(360deg);
			/* 逆时针旋转 */
			transform: rotate(-360deg);
		}
	</style>
</head>
<body>
	<img src="./img/rotate.jpg" alt=""/>
</body>
</html>

        效果图：

QQ录屏20230411165728

2.旋转原点：使用transform-origin属性改变转换原点

  1. 语法：默认圆点是盒子中心点；transform-origin: 原点水平位置原点垂直位置;
  2. 取值：方位名词(left. top. right. bottom. center)；像素单位数值；百分比(参照盒子自身尺寸计算)

     3.实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>旋转原点</title>
	<style>
		img{
			width:250px;
			border: 1px solid black;
			transition: all 2s;
			transform-origin:right bottom;  /* 以盒子右下点为圆心旋转 */
			transform-origin: left bottom;  /* 以盒子左下点为圆心旋转 */
		}
		
		img:hover{
			transform:rotate(360deg) ;
		}
	</style>
	</head>
	<body>
		<img src="./img/rotate.jpg" alt=""/>
	</body>
</html>

        效果图：

3.多重转换 ：使用transform复合属性实现多形态转换

        1.语法： transform：translate（）rotate（）；

        2.实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>旋转原点</title>
	<style>
		.box{
			width: 600px;
			height: 200px;
			border: 1px solid black;
		}
		
		img{
			width: 200px;
			transition: all 2s;
		}
		
		.box:hover img{
			/* translate（）和rotate（）属性不能颠倒 ，旋转会改变坐标轴向，如果先旋转会改变坐标轴向，位移方向会受影响，旋转属性放在最后*/
			transform: translate(400px) rotate(360deg);
		}
	</style>
</head>
	<body>
		<div class="box">
			<img src="./img/rotate.jpg" alt=""/>
		</div>
	</body>
</html>

        效果图（旋转滚动）：

QQ录屏20230411184638

3.缩放：使用scale改变元素的尺寸 

  1. 语法：transform: scale(x轴缩放倍数, y轴缩放倍数);
  2. 技巧：一 般情况下,只为scale设置-一个值, 表示x轴和y轴等比例缩放；transform: scale(缩放倍数)；scale值大于1表示放大, scale值小于1表示缩小
  3. 实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>缩放</title>
		<style>
			.box{
				width: 300px;
				height: 200px;
				margin: 100px auto;
				background-color: pink;
			}
			.box img{
				width: 100%;
				transition: all 0.5s;
			}
			
			
			.box:hover img{
				transform:scale(1.2) ; /* 放大1.2倍 */
				transform:scale(0.7) ; /* 缩小0.7倍 */
				}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="./img/rotate.jpg" alt=""/>
		</div>
	</body>
</html>

         效果图：

缩放

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>缩放-海绵宝宝</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
			}
			img{
				width: 100%;
			}
			.box{
				width: 300px;
				height: 300px;
				margin: 100px auto;
				/* 超出父级的隐藏 */
				overflow: hidden;
			}
			.box p{
				color: blue;
				padding: 10px 10px 0 10px;
			}
			.box .pic{
				position: relative;
				
			}
			
			/* 1.播放按钮压在img上面(绝对定位)
			2.hover的时候实现缩放 
			3.默认 看不见，hover以后变大 */
			
			.box .pic::after{
				position: absolute;
				left: 50%;
				top:50%;
				/* margin-left: -25%;
				margin-top: -25%; */ /* 居中 */
				
				content:'';
				width: 50px;
				height: 50px;
				background-image: url("img/bubiao.png");
				transform:translate(-50%,-50%) scale(5);  /* translate(-50%,-50%)居中 */
				opacity: 0;
				
				transition: all 0.5s;
			}
			/* 鼠标移到li,让after有变化 */
			.box li:hover .pic::after{
				opacity: 1;
				transform:translate(-50%,-50%) scale(1);
			}
			
			
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li>
					<div class="pic">
						<img src="./img/baobao.jpeg" alt=""/>
						<!-- 用伪元素添加播放按钮 -->
					</div>
					<p>我是海绵宝宝，我是派大星，你们好呀！</p>
				</li>
			</ul>
			
		</div>
	</body>
</html>

        效果图：

haimianbaobao

前端挣扎的鱼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
web前端基础——CSS入门
01-20
web前端基础——CSS入门 1.css的引入方式 内部样式： 直接在style里面写 内联样式： 外部样式表 2.css选择器 id选择器： #id名{} Hello World! #para1 { text-align:center; color:red; } ID属性不要以...
WEB前端面试——常见CSS知识点
06-30
WEB前端面试——常见CSS知识点
CSS3中2D平面变换和过渡及动画效果
weixin_45030952的博客
07-07 326
2D平面变换方法 对元素进行旋转，缩放，移动，拉伸。 使用设置transform属性： rotate函数：设置旋转的度数。 旋转的效果： 代码的实现： #rotateDiv { transform：rotate（30deg）;/*设置顺时针旋转的角度，也可以进行扩展*/ } scale函数：设置缩放的效果。 transform：scale（x,y）:x为水平方向，y为垂直方向，小于1的话缩小，大于1放大。 #rotateDiv { transform：scale（2，2）;/*设置水平方向扩大为2倍
css平面转换（位移、旋转、缩放）渐变
qq_43723132的博客
03-28 489
使用transform属性实现元素的位移、旋转、缩放等效果
Web前端开发——html5+css3进阶
WikY
08-29 289
CSS3-2D转换——transform 转换(transform)是css3中具有颠覆性的特征之一，可以实现元素的位移，旋转，缩放。 2D转换是改变标签在二维平面上的位置和形状的一种技术。 位移(transalte) 旋转(rotate) 缩放(scale) 2D转换——位移(translate) 可以改变元素在页面中的位置，类似定位 单位: 像素px，百分比% transform:transalte(x,y); transform:transalteX(); transform:transalteY()
web前端开发—进阶css（空间转换）
m0_59451453的博客
04-20 205
使用transform属性实现元素在空间内的位移、旋转、缩放等效果。
Web前端系列技术之CSS进阶（从基础开始）②【终章】
小柴爱程序的博客
08-11 211
在CSS进阶学习中，第一节 主要介绍了 字体图标使用、平面转换 以及 渐变 ，但是从市面上来看，现在很多技术不仅仅是维持在 2D 平面上了；相反，更多美观的界面都加入了 3D 的元素成份；那么 3D 样式又该如何实现呢？同时又该如何让美观的界面穿插动态特效呢？今天介绍的主要内容就是： 四、空间转换 五、动画空间转换：也称 “ 3D转换 ” ，就是实现元素在空间内的位移、旋转、缩放等效果，这里就需要用到使用属性；空间： 是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间......
03web前端进阶教程--移动端
maiblog
07-04 105
html、css强化。空间转换动画基础。移动web开发，flex布局。响应式布局，rem，vw/vh，max/min-width，bootstrap等前端html&css技术从入门到精通（入门）。
前端开发需要会什么？先掌握这三大核心关键技术
weixin_51689029的博客
12-06 2567
前端工程师，如何创造/制作一个网站应用呢？为了更好的让你理解，我们简单地做一个类比：动画制作者在创造人物的时候，需要从构图、着色和动画效果上入手，让人物有骨、有血，灵性生动。而如果将一个网站应用比作一个人，那么作为造物主的前端工程师，同样要塑造她的骨架、血肉和灵魂。用比较专业的术语来描述，网页的骨架其实就是它的布局，血肉即为它的样式，而灵魂则是应用在交互过程中的动作和响应。对应着这三个方面，前端工程师也使用了不同的工具。如上图所示：使用HTML搭建网页的骨架，也就是实现网页布局；使用CSS添加血肉，也就是为
前端开发工程师学习路线图（收藏版）
weixin_51689029的博客
10-15 9282
在网上看到很多类似“前端现在是不是饱和了，是不是不好找工作了呀？”这类问题，就这类问题也和小伙伴进行了探讨，大家一致认为——不是前端饱和了，而是现在前端的工作在不断独立，门槛越来越高，再也不是只会三大基础就可以胜任的年代了。 前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的同学要注意，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候展现更大的优势。 缺人才，又薪资高，那么怎样才能成为一名前端工程师呢？ 前端工程师需要掌握的技能学习前端需要学习哪些知识？ 学习前端从哪里开始学习？
2024前端面试题！（附答案及解析）（2024.6月最新版）
热门推荐
这世上从不缺让人上头的新鲜感，能顾及你情绪的人实属难得。
03-27 7万+
2024前端面试题！面试宝典！总结心得！（附答案及解析）会持续更新哦！（2024.6月最新版）
Web前端开发规范｜CSS手册｜W3c手册资料合集
02-16
Web前端开发规范｜CSS手册｜W3c手册资料合集
WEB前端开发规范文档CSS命名规范中文WORD版.txt
03-12
资源名称：WEB前端开发规范文档 CSS命名规范 中文WORD版内容简介： Web前端开发，主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序(也就是浏览器端)的开发，开发...
HTML5及CSS3web前端开发技术习题答案解析.pdf
01-07
HTML5及CSS3web前端开发技术习题答案解析
7、css3实现边框不停地跑动效果
最新发布
cyz141001的博客
06-01 318
【代码】7、css3实现边框不停地跑动效果。
记录一次前端页面崩溃的产生及处理
weixin_51123079的博客
05-30 544
记录一次前端页面崩溃的产生及处理
前端开发记录
qq_25806839的博客
05-31 177
【代码】前端开发记录。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 577
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
Web前端开发技术——HTML,CSS,JavaScript 答案
05-20
2. CSS（层叠样式表）是用于控制 Web 页面样式的语言，它可以对 HTML 元素的布局、字体、颜色等进行样式控制。 3. JavaScript 是用于实现 Web 页面交互效果的编程语言，它可以被用于动态地修改 HTML 和 CSS，实现...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端挣扎的鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值