网站首页 > 知识剖析正文

每天一个CSS小技巧 - 梯形标签页

nixiaole 2024-11-27 18:33:15 知识剖析 12 ℃

方案

这是我们最开始的代码及效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box{
      width: 200px;
      height: 50px;

      background: #1b6f9b;
      text-align: center;
      line-height: 50px;
      font-size: 1.5em;
      color: white;
    }
  </style>
</head>
<body>
  <div class="box">TRAPEZOID</div>
</body>
</html>

这里的想法是把上图中的目标想象成一个3D的目标，然后如果能往图里旋转一下，映射在屏幕上的就是梯形了，因此：

transform: perspective(.5em) rotateX(5deg);

由于我们是对整个元素应用3D变形，因此上面的文字也变形了。

这里需要注意的是，对元素使用了3D变形之后，其内部的变形效果是“不可逆转的”，这一点跟2D变形不同，在2D变形的体系下，内部的逆向变形可以抵消外部的变形效应。

因此我们可以这么做，用伪元素

  <style>
    .box{
      width: 200px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      font-size: 1.5em;
      color: white;
      margin-left: 20px;

      position: relative;
    }

    .box::before{
      content: '';
      position: absolute;
      top:0;right: 0;left: 0;bottom: 0;
      z-index: -1;
      background: #1b6f9b;
      transform: perspective(.5em) rotateX(5deg);
    }
  </style>

这个方法确实可以生成一个基本的体型，但因为我们没有设置transform-origin，应用变形效果会让这个元素以它自身的中心线为轴进行空间上的旋转。因此，元素投射到2D屏幕上的尺寸会发生多种变化。

为了让它的尺寸更好的掌握，我们可以为它指定transform-origin:bottom；当它在3D空间中旋转时，可以把它的底边固定住。

      transform-origin: bottom;

现在它看起来直观多了，只有高度会发生变化。不过这样一来，高度的缩水就会变得更加显眼，因为现在整个元素是转离屏幕前的观众；而在这之前，元素的上半部分会转向屏幕后面，而下半部分会转出屏幕。

这里，我们通过变形属性来改变它的尺寸：

      transform: scaleY(1.3) perspective(.5em) rotateX(5deg);
      transform-origin: bottom;

上一篇： CSS函数translate、translate3d的使用
下一篇：有趣的 CSS 数学函数

网站首页 > 知识剖析 正文

每天一个CSS小技巧 - 梯形标签页

方案

猜你喜欢

网站首页 > 知识剖析正文