CSS3-2D转换

最新推荐文章于 2024-05-12 11:58:43 发布

汇而不置

最新推荐文章于 2024-05-12 11:58:43 发布

阅读量320

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/weixin_43487066/article/details/106179566

版权

css3-2D转换2d转换转换(transform) 是css3中具有颠覆性的特征之一，可以实现元素的位移、缩放等效果。移动：translate选转: rotate缩放： scale2d转换之移动 translate2d移动时2d转换里面的一种功能，可以改变在页面中的位置，类似定位。定义2D转换中的移动，验证X和Y轴移动元素tanslate最大的优点: 不会影响到其他元素的位置tanslate中的百分比单位是对于自身元素的tanslate:(50%,50%);对行内

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

css3-2D转换

2d转换

转换(transform) 是css3中具有颠覆性的特征之一，可以实现元素的位移、缩放等效果。

移动：translate
选转: rotate
缩放： scale

2d转换之移动 translate

2d移动时2d转换里面的一种功能，可以改变在页面中的位置，类似定位。

定义2D转换中的移动，验证X和Y轴移动元素
tanslate最大的优点: 不会影响到其他元素的位置
tanslate中的百分比单位是对于自身元素的tanslate:(50%,50%);
对行内标签没有效果

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style>
		div{
    
			height: 200px;
			width:200px;
		}
		/* 移动荷载的位置：定位  盒子的玩边境  2d转换移动 */
		div:nth-child(1){
    
			
			background-color: red;
			/* x就是x轴是哪个移动位置 就是y轴上移动位置 中间用逗号隔开 */
			/* transform: translate(x,y); */
			/* transform: translate(100px,100px); */
			
			
			/* transform: translateX(x); 只移动x轴 */
			/* transform: translateY(y);  只移动y轴*/
		}
		div:nth-child(2){
    
			background-color:blue;
			transform: translateX(50%);
		}
		/* translate里面的参数是可以用 %,
			用%移动的距离是盒子自身的高度和宽度来对比的
		*/
		
	</style>
</head>
<body>
	<div></div>
	<div></div>
</body>
</html>

在这里插入图片描述

运用

苏宁商品页鼠标hover效果

在这里插入图片描述

img:hover{
   
	transform:translateY(-5px);
}

案例；让盒子水平和垂直居中。

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>盒子水平垂直居中1</title>
	<style>
		div{
    
			position: relative;
			width: 500px;
			height:500px;
			background-color: red;
		}
		p{
    
			position: absolute;
			top:50%;
			left:50%;
			width:200px;
			height:200px;
			background-color: blue;
			/* 拉回盒子高度和宽度的一半 */
			margin-left: -100px;
			margin-top: -100px;
		}
	</style>
</head>

最低0.47元/天解锁文章

汇而不置

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3-2D转换

css3-2D转换2d转换转换(transform) 是css3中具有颠覆性的特征之一，可以实现元素的位移、缩放等效果。移动：translate选转: rotate缩放： scale2d转换之移动 translate2d移动时2d转换里面的一种功能，可以改变在页面中的位置，类似定位。定义2D转换中的移动，验证X和Y轴移动元素tanslate最大的优点: 不会影响到其他元素的位置tanslate中的百分比单位是对于自身元素的tanslate:(50%,50%);对行内
复制链接

扫一扫

专栏目录