首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    玩转 CSS3 3D 变换:打造炫酷立体网页效果

    CSS3 立体 3D 变换 1 坐标轴 在计算机图形学中,2D场景仅包含两个维度,即水平的X轴和垂直的Y轴。而在3D场景中,除了X轴和Y轴之外,还增加了一个维度,即Z轴。...CSS3中的3D变换主要包括以下几种功能函数: 3D位移 包括 translateZ() 和 translate3d(x, y, z) 两个函数,分别用于在Z轴方向上和三维空间中进行位移。...度,等效于 rotateZ(30deg) */ ## 5 transform-style 语法 使被转换的子元素保留其 3D 转换,给需要 3D 变换的父(上一级或者上上级)元素设置 ```css...只要CSS绘制3D图形,这个transform-style必须加上,perspective可以选择性的添加。...这个效果通常需要在父元素中设置 perspective,然后观察子元素位移距离的变化。 /*为什么它不会产生任何效果

    10810

    阴影进阶,实现更加的立体的阴影效果

    CSS 阴影的存在,让物体看上去更加有型立体。 然而,在最简单的阴影使用之上,我们可以实现更多有意思且更加立体的阴影效果。 本文将带大家看看如何使用 CSS 实现几类比普通阴影更加立体的阴影效果。...给它生成一个和原图边角形状类似的图形,再通过 transform 位移一下,可能是这样: OK,最后对这个用伪元素生成的元素进行一些虚化效果(filter或者box-shadow都可以),就可以实现一个边角看起来像被撕开的立体效果...: 文字立体投影 / 文字长阴影 上面的立体效果在文字上就完全不适用了,所以对待文字的立体阴影效果,还需要另辟蹊径。...: 嗯,大功告成,这次顺眼了很多~ 详细完整的代码,你可以戳这里:CodePen Demo -- 立体文字阴影 当然,使用 CSS 生成立体文字阴影的方法还有很多,下面再贴出一例,使用了透明色叠加底色的多重线性渐变实现的文字立体阴影...,感兴趣的同学可以去看看具体实现: 详细完整的代码,你可以戳这里:CodePen Demo -- 线性渐变配合阴影实现条纹立体阴影条纹字 最后 总结一下,本文介绍了利用 CSS 实现 5 种更加立体的阴影效果的方式

    1.9K20
    领券