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

-王二毛-

已于 2022-03-07 09:02:58 修改

阅读量585

点赞数

分类专栏： # css 文章标签： css html css3 html5

于 2021-03-23 15:59:19 首次发布

本文链接：https://blog.csdn.net/weixin_45084986/article/details/115126069

版权

css 专栏收录该内容

23 篇文章 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>

在这里插入图片描述

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

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

<!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 {
            transform: translateZ(200px);
        }
    </style>
</head>

<body>
    <div class="box1"></div>
</body>

</html>

旋转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>

-王二毛-

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS_变形之平移&旋转&缩放

平移translateX和Y轴平移 transform: translateX(-50%) translateY(-50%);<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ background-color: #dddddd } .
复制链接

扫一扫