CSS3 perspective 属性

CSS3 perspective 属性

perspective 属性是CSS3用于控制3D（三维）变换的一种属性。它可以给元素设置一个透视点，从而使元素产生一种“远近”的效果，即深度效果。

语法

perspective: none | <length> | inherit;

• none：默认值。代表没有透视效果。
• <length>： 一个正数，代表透视点到观察者的距离。透视点越远，元素看起来就越小，距离近则越大。
• inherit：表示继承父元素的透视效果。

示例

.box {
  perspective: 100px;
  transform: rotateY(45deg);
}

在上面的示例中，.box 设置了透视点距离为 100px，然后通过 transform 属性设置了 rotateY 扭曲。这里的 rotateY 是CSS3中用于控制元素沿Y轴旋转的变换函数，意思是绕Y轴旋转 45deg，产生扭曲效果。

注意点

• perspective 属性只有在应用3D（三维）变换时才会生效。
• perspective 属性仅影响子元素，不影响自身元素。
• perspective 根据它设置的距离产生效果，若该值越大，视角越远， 效果越弱。

应用

perspective 属性常用于3D变换和动画效果中，可以为元素创建出更加生动、立体的效果，增强交互性和视觉感受。

示例1：卡牌旋转效果

当鼠标放到卡牌上时，通过设置 perspective 属性和 transform 属性来产生翻转效果。

.card-box {
  perspective: 1000px;
  position: relative;
}

.card {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(0deg);
  transition: transform 0.5s;
}

.card:hover {
  transform: rotateY(180deg);
}

示例2：盒子翻转效果

.box-container {
  perspective: 800px;
}

.box {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.box .front,
.box .back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.box .front {
  transform: rotateY(0deg);
}

.box .back {
  transform: rotateY(-180deg);
}

.box:hover .front {
  transform: rotateY(180deg);
}

.box:hover .back {
  transform: rotateY(0deg);
}

在上面的示例中，.box-container 设置透视点距离为 800px，同时 .box 设置了 transform-style: preserve-3d 属性，表示其子元素的变换也是3D的，并且通过设置 transition 属性实现了过渡效果。通过 .box:hover .front 和 .box:hover .back 这两个选择器可以实现翻转效果。

总结

perspective 属性是CSS3中用于控制3D（三维）变换的一种属性，常用于三维变换和动画效果中，通过调整其值可以为元素创建出更加生动、立体的效果。需要注意的是，perspective 属性只有在应用3D（三维）变换时才会生效，且仅影响子元素。