admin管理员组

文章数量:1130349

关于CSS透视perspective的第一次”见面“

今天在看教学视频，学到CSS中的透视属性，视觉上觉得非常舒服，跟着写了个小小的demo.记录一下学习。
透视：perspective:数值px;近大远小。让图像更加立体。
视距：表示视点距离屏幕的长短。

首先实现效果如下：
1、中间有一张图片，有两扇门，两个把手；
2、鼠标移动到整个门的时候，两扇门就向两边打开，立体显示。

HTML代码：
<section> <div ></div> <div ></div> </section>

CSS代码：

<style>
			section{
				width: 450px;
				height: 300px;
				border: 1px solid #000;
				margin: 100px auto;
				background: url(img/coco.png) no-repeat;
				background-size: 100% 100%;
				position: relative;
				perspective: 1000px;
			}
			.door-1,
			.door-2{
				position: absolute;
				top: 0;
				width: 50%;
				height: 100%;
				background-color: peru;
				transition: all 1s;
			}
			.door-1{
				left: 0;
				border-right: 1px solid #000;
				transform-origin: left;
				
			}
			.door-2{
				right: 0;
				border-left: 1px solid #000;
				transform-origin: right;
			}
			.door-1::b

关于CSS透视perspective的第一次”见面“

今天在看教学视频，学到CSS中的透视属性，视觉上觉得非常舒服，跟着写了个小小的demo.记录一下学习。
透视：perspective:数值px;近大远小。让图像更加立体。
视距：表示视点距离屏幕的长短。

首先实现效果如下：
1、中间有一张图片，有两扇门，两个把手；
2、鼠标移动到整个门的时候，两扇门就向两边打开，立体显示。

HTML代码：
<section> <div ></div> <div ></div> </section>

CSS代码：

<style>
			section{
				width: 450px;
				height: 300px;
				border: 1px solid #000;
				margin: 100px auto;
				background: url(img/coco.png) no-repeat;
				background-size: 100% 100%;
				position: relative;
				perspective: 1000px;
			}
			.door-1,
			.door-2{
				position: absolute;
				top: 0;
				width: 50%;
				height: 100%;
				background-color: peru;
				transition: all 1s;
			}
			.door-1{
				left: 0;
				border-right: 1px solid #000;
				transform-origin: left;
				
			}
			.door-2{
				right: 0;
				border-left: 1px solid #000;
				transform-origin: right;
			}
			.door-1::b

本文标签： 透视cssperspective

版权声明：本文标题：关于CSS透视perspective的第一次”见面“ 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://it.en369.cn/jiaocheng/1758716495a2783260.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。