2021-04-08

最新推荐文章于 2024-10-01 23:20:42 发布

qq_49366290

最新推荐文章于 2024-10-01 23:20:42 发布

阅读量86

点赞数 1

分类专栏： CSS网页设计2D转换文章标签： css html

本文链接：https://blog.csdn.net/qq_49366290/article/details/115519577

版权

CSS网页设计2D转换专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了CSS3中的2D转换，包括translate移动、rotate旋转和scale缩放。移动不会影响其他元素，rotate通过指定角度实现元素的旋转，缩放则能实现元素的放大和缩小。示例代码展示了这些功能的实际应用，帮助读者更好地理解和运用CSS3的2D转换技术。

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

网页设计之2D转换

转换（transform）是CSS3中重要特征之一，可以实现元素的位移、旋转、缩放等效果。

移动：translate
旋转：rotate
缩放：scale

移动translate
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似于定位。
语法：
transform:translate(x,y);
transform:translateX(n);
transform:translateY(n);
相对于定位的优点：不会影响到其他元素的位置。
代码及结果如下：

<style>
		.box1{
			height: 200px;
			width: 200px;
			background-color: skyblue;
		    transform:translate(60px,60px)
		}
			.box2{
			height: 200px;
			width: 200px;
			background-color: blueviolet;
			
		}
	</style>

运行结果：
在这里插入图片描述

旋转：rotate
2D旋转是指让元素在2维平面内顺时针或逆时针转动。
语法：
transform:rotate(度数);
rotate里面跟度数，单位是deg。如：rotate（45deg）
角度为正时，顺时针。负时，逆时针。
默认旋转中心点是元素的中心点。
代码及结果如下

  <style>
	   .box{
		   background: url("images/Rbff7a4d161eb2de70ab157f89eff26f9.jpg");
	      height: 300px;
		   width: 300px;
		   border: solid pink;
		  border-radius: 50%;
/*		   transition: transform 1.5s;*/
		   transform-origin:200px 200px;
	   }
 .box:hover{
		   transform:rotate(160deg);
	   }
</style>

运行结果如图：
在这里插入图片描述

缩放：scale
缩放，即可以对元素进行放大和缩小。缩放也是不会影响其他元素
语法：
transform:scale(x.y);
x,y为数字，不带单位。
若为1，则为不放大不缩小。
为2时，宽和高都放大2倍。
为0.5时，则缩小一半。
代码及运行结果如下：

 <style>
	   div{margin: 20px;
		   float: left;
		  height: 300px;
		   width: 300px;
		   overflow: hidden;
	   }
	   div img:hover{
		   transform:scale(1.2,1.2);
	   }

       <div>
       <img src="../images/Rbff7a4d161eb2de70ab157f89eff26f9.jpg"></div>
	<div>
	<img src="../images/Rbff7a4d161eb2de70ab157f89eff26f9.jpg"></div>