CSS_变形之平移&旋转&缩放

小咪咪 2023-10-06 16:59 61阅读 0赞

## 平移translate ##

### X和Y轴平移 transform: translateX(-50%) translateY(-50%); ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			body{
         
    				background-color: #dddddd
    			}
    			.box1 {
         
    				width: 100px;
    				height: 100px;
    				background-color: #00FF00;
    				margin: 0 auto;
    
    			}
    
    			.box2 {
         
    				width: 100px;
    				height: 100px;
    				background-color: #ffff00;
    				margin: 0 auto;
    				/*
    				变形就是指通过css来改变元素的形状或位置
    				变形不会影响到页面的布局
    				transform用来设置元素的变形效果
    				平移:
    					translateX()沿着x轴方向平移
    					translateY()沿着y轴方向平移
    					translateZ()沿着z轴方向平移
    						-平移元素，相对于自身计算
    				*/
    
    				transform: translateX(20px);
    			}
    
    			.box3 {
         
    				background-color: #ff0000;
    				position: absolute;
    				/* 相对于包含块的 */
    				left: 50%;
    				top: 50%;
    				transform: translateX(-50%) translateY(-50%);
    
    			}
    
    			.box4,
    			.box5 {
         
    				width: 220px;
    				height: 300px;
    				background-color: #fff;
    				float: left;
    				margin: 0 10px;
    				transition: all .3s;
    			}
    
    			.box4:hover,
    			.box5:hover {
         
    				transform: translateY(-4px);
    				box-shadow: 0 0 10px rgba(6, 0, 0, .3)
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box1"></div>
    		<div class="box2"></div>
    		
    		<div class="box3">333</div>
    		
    		<div class="box4"></div>
    		<div class="box5"></div>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70]

### Z轴平移 transform: translateZ(200px); ###

> z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，  
> 距离越大，元素离人越近  
> z轴平移属于立体效果(近大远小)，默认情况下网页是不支持透视，如果需要看见效果  
> 必须要设置网页的视距

## 旋转transform: rotateZ(1turn); ##

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            html {
         
                /* 设置当前网页的视距为800px,人眼距离网页的距离 */
                perspective: 800px;
            }
            
            body {
         
                border: 1px red solid;
                background-color: #bfa
            }
            
            .box1 {
         
                width: 100px;
                height: 100px;
                background-color: #00FF00;
                margin: 200px auto;
                /* 
    				 z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，
    				 距离越大，元素离人越近
    				 z轴平移属于立体效果(近大远小)，默认情况下网页是不支持透视，如果需要看见效果
    				 必须要设置网页的视距
    				 */
                transition: 2s;
            }
            
            body:hover .box1 {
         
                /*
    				通过旋转可以使元素沿着x y或z旋转指定的角度
    				rotateX( )
    				rotateY( )
    				rotateZ( )
    				*/
                /* transform: rotateZ(1turn); 转一圈*/
                /* transform: rotateZ(45deg); */
                先向Z轴平移再旋转，也可以返过来
                /* transform: translateZ(400px) rotateY(180deg); */
                transform: rotateY(180deg);
                /* 是否显示元素的背面 */
                backface-visibility: hidden;
            }
        </style>
    </head>
    
    <body>
        <div class="box1">
            <img src="mitu.png">
        </div>
    </body>
    
    </html>

## 缩放 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			.box1 {
         
    				width: 100px;
    				height: 100px;
    				background-color: #bfa;
    				transition: 2s;
    				margin: 100px auto;
    			}
    
    			.box1:hover {
         
    				/*
    			对元素进行缩放的函数:
    			scaleX()水平方向缩放
    			scaleY()垂直方向缩放
    			scale()双方向的缩放
    			*/
    				transform: scale(2)
    			}
    
    			.img-wrapper {
         
    				width: 200px;
    				height: 200px;
    				border: 1px red solid;
    				overflow: hidden;
    			}
    
    			img {
         
    				transition: .2s;
    			}
    
    			.img-wrapper:hover img {
         
    				transform: scale(1.2);
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box1">
    			<div class="img-wrapper">
    				<img src="./1.jpg"
    					width="100%" height="100%">
    			</div>
    		</div>
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210323153439251.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng==,size_16,color_FFFFFF,t_70