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

原创

于 2019-04-23 12:02:50 发布 · 317 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#开门大吉demo #透视perspective属性 #动画transition、transform

本文介绍了CSS的透视属性perspective，通过一个简单的动画demo展示了如何创建立体效果。当鼠标悬停在门上时，门会以立体方式向两侧打开，强调了perspective在实现近大远小视觉感受中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

HTML代码：
<section> <div class="door-1"></div> <div class="door-2"></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