透视

最新推荐文章于 2024-03-05 17:29:30 发布

时松

最新推荐文章于 2024-03-05 17:29:30 发布

阅读量263

点赞数 2

分类专栏：基础文章标签：透视

本文链接：https://blog.csdn.net/ice_yr/article/details/100326300

版权

基础专栏收录该内容

79 篇文章 1 订阅

订阅专栏

3D变形（css3）transform

左手坐标系
伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方，建立一个左手坐标系，拇指、食指和中指分别代表x、y、z轴的正方向
（2D x y）
css3中的3D坐标系与3D坐标系有一定区别
x坐标是负的，右边是正的
y上面是负的，下面是正的
z里面是负的，外面是正的

rotateX

就是沿着x立体旋转

透视（perspective）

电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程中，呈现3D效果
1.透视原理：近大远小。
2.浏览器透视：把近大远小的所有图像，透视在屏幕上。
3.perspective：规矩，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置
注：并非任何情况下需要透视效果，根据开发需要进行设置
perspective一般作为一个属性，设置给父亲，作用于所有3D转换子元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{
			perspective: 500px;  /*视距 距离 眼睛到屏幕的距离 视距越大效果越不明显 视距越小效果越明显 （近大远小）*/ 
		}
		img {
			display: block;
			margin: 0 auto; 
			transition: all 1s;
			/*transform-origin: left;  设置变形中心点*/
		}
		img:hover {
			transform: rotateX(180deg); 
		}
	</style>
</head>
<body>
	<img src="ad-l.png" alt="">
	<img src="ad-l.png" alt="">

</body>
</html>

translate3d

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div {
			width: 200px;
			height: 200px;
			background-color: blue;
			margin: 100px auto;
			transition: all 1s;
		}
		div:hover {
			/*transform: translate3d(x,y,z);  x y 可以是px 可以是% z只能是px*/
			transform: translate3d(100px, 100px, 600px);
		}
		h2 {
			transform: translate3d(0, 50px, 0);
			transition: all 0.8s;
		}
		h2:hover {
			transform: translate3d(0, 0, 0);
		}
	</style>
</head>
<body>
	<div></div>
	<h2>一毫米的突破++</h2>
</body>
</html>

门案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		section {
			width: 450px;
			height: 300px;
			border: 1px solid #000; 
			margin: 100px auto;
			background: url(wz.png) no-repeat;
			position: relative;
			perspective: 1000px;  /*给父盒子加透视效果*/
		}
		.door-l, .door-r {
			position: absolute;	
			top: 0;
			width: 50%;
			height: 100%;
			background-color: blue;
			transition: all 1s;   /*两个门都做过渡效果*/
		}
		.door-l {
			left: 0;
			border-right: 1px solid #000; 
			transform-origin: left;  /*左侧盒子按左边翻转*/ 
		}
		.door-r {
			right: 0;
			border-left: 1px solid #000;
			transform-origin: right;   /*右侧盒子右边翻转*/  
		}
		.door-l::before,
		.door-r::before {  /*伪元素就是插入一个元素标签*/
			content: "";
			position: absolute;
			top: 50%; 
			width: 20px;
			height: 20px;
			border: 1px solid #000;
			border-radius: 50%;   /*圆角*/
			transform: translateY(-50%);   /*translate如果是百分比，就是走自己高度的一半*/
			background-color: black;
		}
		.door-l::before {
			right: 6px; 
		}
		.door-r::before {  /*伪元素就是插入一个元素标签*/
			left: 6px;   
		}
		/*鼠标经过section盒子，两个门盒子，翻转 ratateY*/
		section:hover .door-l {
			transform: rotateY(-130deg);  /*因为往左边翻动，所以是负值*/

		}
		section:hover .door-r {
			transform: rotateY(130deg);
		}
	</style>
</head>
<body>
	<section>
		<div class="door-l"></div>
		<div class="door-r"></div>
	</section>
</body>
</html>