用css来实现透视效果_css教程-跟版网

接下来我将为你详细讲解如何用CSS来实现透视效果的完整攻略，包含以下几个部分：

概述透视效果
使用 transform: perspective() 创建透视
使用 transform-style: preserve-3d 将子元素转换为三维空间
使用 transform: rotate() 扭曲被转换的子元素
通过示例说明如何实现透视效果
概述透视效果

透视效果是指在网页中展现三维物体的效果，即使网页只有二维的能力。通过透视效果,我们能够在二维空间中突出物体的深度感，增强视觉效果。在CSS中，我们可以通过把二维的元素变为三维的来实现透视效果。

使用 transform: perspective() 创建透视

我们通过在父级元素上使用perspective属性来设置透视距离，实现透视效果。当我们设置了一个元素的perspective属性为500px时，这就意味着当元素越远离观察者，它就会被透视压缩的越小，从而创建真实的3D效果。

.parent {
  perspective: 500px;
}

使用 transform-style: preserve-3d 将子元素转换为三维空间

transform-style属性常用于转换子元素为三维元素。more元素和less元素被转换为三维，就像3D软件中物体的基本设置一样，在嵌套的元素中，如果没有使用该属性，那么子元素总是会跟随父级元素转换角度，就无法形成立体效果。

.parent {
  perspective: 500px;
  transform-style: preserve-3d;
}
.child {
  transform-style: preserve-3d;
}

使用 transform: rotate() 扭曲被转换的子元素

通过transform属性的rotate方法可以实现对子元素的扭曲，达到透视效果

.child {
  transform: rotateY(45deg);
}

通过示例说明如何实现透视效果

下面我们用两个示例来说明如何实现透视效果。

实例一：正方体

在这个例子中，我们用CSS3实现了一个正方体，方体在一定角度下可以呈现出三维和透视效果。

HTML代码：

<div class="cube-wrapper">
  <div class="cube">
    <div class="front"></div>
    <div class="back"></div>
    <div class="right"></div>
    <div class="left"></div>
    <div class="top"></div>
    <div class="bottom"></div>
  </div>
</div>

CSS代码：

.cube-wrapper {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  position: relative;
  perspective: 800px;
}
.cube {
  position: absolute;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
}
.cube div {
  position: absolute;
  width: 200px;
  height: 200px;
  box-shadow: inset 0 0 50px rgba(0,0,0,0.8);
}
.cube .front {
  transform: translateZ(100px);
}
.cube .back {
  transform: translateZ(-100px);
}
.cube .right {
  transform: rotateY(90deg) translateZ(100px);
}
.cube .left {
  transform: rotateY(-90deg) translateZ(100px);
}
.cube .top {
  transform: rotateX(90deg) translateZ(100px);
}
.cube .bottom {
  transform: rotateX(-90deg) translateZ(100px);
}

实例二：抛物体

这个例子是用CSS3实现一个三维的抛物体。

HTML代码：

<div class="ball-wrapper">
  <div class="ball"></div>
</div>

CSS代码：

.ball-wrapper {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  position: relative;
  perspective: 800px;
}
.ball {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transform-style: preserve-3d;
  background-color: #0074d9;
  box-shadow: 0 5px 0 rgba(0,0,0,0.1);
  transform: rotateX(90deg) translateZ(0px);
  animation: ball 2s ease-out infinite;
}
@keyframes ball {
  from {
    transform: rotateX(90deg) translateZ(0px);
  }
  to {
    transform: rotateX(360deg) translateZ(400px);
  }
}

以上就是使用CSS实现透视效果的完整攻略，希望对你有帮助。

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！

用css来实现透视效果

相关文档推荐