美文网首页
CSS3 3D变形制作梯形标签页

CSS3 3D变形制作梯形标签页

作者: 巴斯光年lip | 来源:发表于2017-06-07 23:22 被阅读0次

有了css3的3d变形功能之后,写一个梯形出来就不需要再用border搭两个三角形在两边了。

border边框方法添加三角形
现在我们用3D旋转来实现这个效果。
首先想象一个在3D环境下的矩形:

我们让它以水平方向上的X轴为轴线旋转,由于透视的关系,呈现在我们眼前的不就是一个梯形吗!


但是在这里也发现了两个问题:

  1. 字体也跟着背景色一起旋转了。
    解决这个问题的方法就是,把变形效果作用在伪元素上。
<div class="two">trapezoid</div>
.two{
      font-size:24px;
      padding:.5em 2em .5em;
      display:inline-block;
      position:relative;
}
.two::before {
      content:'';    /*用伪元素来生成一个矩形*/
      position:absolute;
      top:0; right:0; bottom:0; left:0;
      background:#F6DEE9;
      z-index:-1;    /*背景色要在文字的下一层,以免挡住文字*/
      transform:perspective(100px) rotateX(30deg);
}
字体没有跟着一起旋转
  1. 旋转之后,它的底边宽度变长了,底部的位置也与之前不一致,这是因为当我们没有设置 transform-origin 属性时,应用变形效果会让这个元素以它自身的中心线为轴进行空间上的旋转。此时,我们可以指定它的 transform-origin: bottom;,当它在3D空间旋转时,把底边固定住。
  transform:perspective(100px) rotateX(30deg);
  transform-origin: bottom;

现在我们可以看得出来,底部对齐了,但是它的高度却变短了,此时,垂直方向上的缩放程度( rotateY()变形属性)在达到145%之后可以补足它在高度上的缩水。

  transform: scaleY(1.45) perspective(100px) rotateX(30deg);
  transform-origin: bottom;

在这之后,还可以为标签页增加一些样式:

 content:'';
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  background:#F6DEE9;
  background-image:linear-gradient(
                    rgba(255,255,255,.8),
                    rgba(255,255,255,0));  /*添加一层白色的渐变*/
  z-index:-1;
  transform: scaleY(1.45) perspective(100px) rotateX(30deg);
  transform-origin: bottom;
  border-radius: .5em .5em 0 0;
  border:2px solid #fbabd1;   /*描边*/
  border-bottom:none;   /*去掉底边框*/
  box-shadow: 0 .1em white inset;  /*白色的内阴影,打造高光的效果*/

参考书籍:Lea Verou《CSS揭秘》

相关文章

  • CSS3 3D变形制作梯形标签页

    有了css3的3d变形功能之后,写一个梯形出来就不需要再用border搭两个三角形在两边了。 我们让它以水平方向上...

  • 梯形标签页

    梯形是用CSS难以生成的形状,使用伪元素可行,但不灵活。Sooooooooo,我们可以使用CSS中的3D旋转(由于...

  • 13、梯形标签页

    让一个矩形在3D上进行X轴旋转,由于3D透视的关系,看上去就会变成一个梯形,所以可以利用之前平行四边形的解决方案来...

  • 数字人C4D角色动画研究之十二:姿态变形

    副标题:制作七巧板变形动画 【前言】 上一篇讲到地图展开,制作动画的时候,应用到姿态变形标签。这个标签在制作变形动...

  • web前端入门到实战:CSS3中的变形(transform)、过

    css3中制作动画的几个属性:css3中的变形(transform)、过渡(transition)、动画(anim...

  • web前端入门到实战:CSS3中的变形(transform)、过

    css3中制作动画的几个属性:css3中的变形(transform)、过渡(transition)、动画(anim...

  • 6_动画_其他属性

    2D、3D变形动画 transform:2D变形:复合属性 通过 CSS3 转换,我们能够对元素进行移动、缩放、转...

  • 用CSS3制作3D图片环

    上一篇文章讲了利用css3制作3D图片爆炸效果,现在我们同样用css3制作3D图片环,我们先看一下实现的效果图:刚...

  • C4Dxpresso标签做表情控制器

    (一)表情制作前期准备 坐标调整方法: (二)利用姿态变形标签 首先对标签命名: 来到姿态变形【标签】这一栏;添加...

  • vue实现梯形tag标签页

    有时候一些框架的组件样式并不太美观但是很通用,如果你想要把它变美观些就必须要重置框架组件的样式代码,那么问题来了重...

网友评论

      本文标题:CSS3 3D变形制作梯形标签页

      本文链接:https://www.haomeiwen.com/subject/lflafxtx.html