CSS Perspective：如何为您的网站增添层次感和深度

发布时间：2023-05-16

CSS Perspective是一种CSS属性，用于在2D或3D空间中定位元素并为网站添加层次感和深度。通过使用透视效果和沿Z轴旋转元素，您可以创建视觉上引人注目的页面

一、CSS Perspective的基础

要使用CSS Perspective，首先必须了解一些CSS元素的基础知识

  1. 透视 在2D平面上看，透视是一种从远处到近处逐渐变大的效果。在CSS中，通过为容器元素添加perspective属性来实现透视效果。 
    .container {
  perspective: 1000px;
}
    perspective属性接受一个数值，用于确定透视距离，这个值越大，则元素离观察者越远，较小的值将产生更大的视差效果，越接近于二维平面。
  2. transform-origin transform-origin属性用于确定元素变换的中心点位置，默认值为元素的中心点，可以通过使用一对坐标值——一个X和一个Y来确定中心点的位置 
    .container {
  perspective: 1000px;
  transform-origin: center top;
}
  3. transform-style transform-style属性指定被嵌套元素如何在三维空间中呈现：flat、preserve-3d。preserve-3d值表示被嵌套的元素保持透视变换。 
    .container {
  perspective: 1000px;
  transform-origin: center top;
  transform-style: preserve-3d;
}

二、CSS Perspective的应用

  1. transform: rotateX/Y 通过rotateX/Y的旋转定位，可以改变元素在三维空间位置，从而给人们传达出浏览到页面的三维空间。举个例子，我们旋转一个方格，让它看上去像是在斜坡上。 
    .box {
  transform: rotateX(45deg);
}
  2. transform: translateZ（位移） 另一个影响CSS perspective的属性是translateZ。transform: translateZ(n)的效果类似于transform: translateY(n)和transform: translateX(n)，不过只是沿着Z轴的方向移动元素。 
    .box {
  transform: translateZ(-50px);
}
  3. transform: scaleZ（比例） scaleZ是可以为元素创建锥形效果的属性。通过将scaleZ属性设置为0，使元素收缩到平面上。通过将scaleZ属性设置大于0的值，可以将元素扩大并创建锥形效果。 
    .box {
  transform: scaleZ(1.5);
}

三、CSS Perspective的应用案例

  1. 3D按钮 使用CSS perspective，可以为按钮添加逼真的3D效果，从而吸引用户的注意力。一个常见的技巧是将按钮元素向上翻转，使其看起来像是从底部出现并准备进行互动操作。 
    .btn {
  position: relative;
  display: inline-block;
  perspective: 100px;
  transform-origin: center center;
}
.btn span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform-origin: center center;
  transition: transform 0.3s ease-out;
}
.btn:hover span {
  transform: rotateX(-90deg);
}
.btn .back {
  transform: rotateX(90deg);
}
  2. 3D图片轮播 使用CSS perspective还可以创建3D效果的图片轮播，通过在x、y和z轴上旋转图像并将其放置在透视容器中，可以为用户提供更为生动的浏览体验。 
    .carousel-container {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 800px;
}
.carousel {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: rotate 12s linear infinite;
}
@keyframes rotate {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(-360deg);
  }
}
.carousel-item {
  position: absolute;
  width: 100%;
  height: 70vh;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.carousel-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center -200px;
  transition: transform 1s;
}
.carousel-item.active img {
  transform: translateZ(300px);
}
  3. 3D盒子效果 通过使用CSS perspective，我们可以使用一些简单的CSS技巧来创建立方体。为了在3D空间中定位和旋转元素，我们需要使用一些不同的CSS属性。这个例子是一个带有立方体效果式样的3D盒子。 
    .box-container {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 50px auto;
  perspective: 2000px;
}
.box {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: rotate 10s linear infinite;
}
@keyframes rotate {
  0% {
    transform: rotateY(0deg) rotateX(0deg);
  }
  100% {
    transform: rotateY(360deg) rotateX(360deg);
  }
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  transform-style: preserve-3d;
}
.front {
  transform: translateZ(250px);
}
.back {
  transform: translateZ(-250px) rotateY(180deg);
}
.top {
  transform: rotateX(90deg) translateZ(250px);
}
.bottom {
  transform: rotateX(-90deg) translateZ(250px);
}
.left {
  transform: rotateY(-90deg) translateZ(250px);
}
.right {
  transform: rotateY(90deg) translateZ(250px);
}

以上是一些CSS Perspective的应用案例，当然还有更多，不过这些例子足以让您在使用CSS perspective时有一个良好的起点。

推荐文章