《CSS揭秘》笔记(十), 梯形效果
2020-07-18 05:19
447 查看
《CSS揭秘》笔记(十)
梯形效果
3D旋转模拟
并没有一组2D变形属性能生成一个梯形,但是我们可以利用透视关系在css中用3D旋转来模拟出这个效果:
.box1{ width: 100px; height: 50px; margin: 20px; background-color: #58a; transform: perspective(.5em) rotateX(5deg); }
但是如图所示,它依然有瑕疵,容器中的文字也跟着变形了。然而,与2D图形不同的是,它的内部的变形效果是不可逆转的,不能使用逆向变形的来抵消外部变形。
因此我们可以用伪元素的方案把变形效果作用在伪元素上。
.box2{ position: relative; display: inline-block; padding: .5em 1em .35em; color: white; } .box2::before{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background-color: #58a; transform: perspective(.5em) rotateX(5deg); }
然而这个方案依然存在着问题,我们还未设置
transform-origin,因此应用的变形效果会让这个元素以它自身的中心线为轴进行空间上的旋转,它的尺寸会比较难以掌握。
为了让它的尺寸更好掌握,可以为它指定
transform-origin: bottom;,当它在3D空间中旋转时,可以把它的底边固定住,致使它只会有高度上发生变化。在垂直方向的缩放程度(也就是
scaleY()变形属性到达130%时,可以弥补变形时高度上的缩水。
.box3{ position: relative; display: inline-block; padding: .5em 1em .35em; color: white; } .box3::before{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background-color: #58a; transform-origin: bottom; transform: perspective(.5em) rotateX(5deg) scaleY(1.3) perspective(.5em); }
我们把
transform-origin修改成
bottom left或
bottom right,就可以立即得到左侧倾斜或右侧倾斜的梯形。
然而需要注意的是以上的效果中的斜边角度依赖于元素的宽度,对于内容长度不等却想要得到斜度一致的梯形就不合适了。
本篇文章是《CSS揭秘》一书的笔记,如果侵犯到了原著作者的权益,请联系我删除。
相关文章推荐
- 《css揭秘》笔记(十三),染色效果
- 《css揭秘》笔记(十二),投影效果
- 《css揭秘》笔记(十一), 简单饼图效果
- Android实用笔记——使用ScrollView实现滚动效果
- cocos2d-x学习笔记(五)仿真树叶飘落效果的实现(精灵旋转、翻转、钟摆运动等综合运用)
- UnityShader片段着色器之河流、旋转、outLine效果 笔记
- Android笔记—自定义Listview控件的行选项背景与效果
- Java学习笔记------如何为文本输入框设置下凹效果?
- 12.22笔记(关于CALayer//Attributes//CALayer绘制图层//CALayer代理绘图//CALayer动画属性//CALayer自定义子图层//绘图pdf文件//绘图渐变效果)
- 【CSS学习笔记】CSS动画效果实战
- cocos2dx学习笔记(着色器水纹效果)
- 水晶报表的一些学习笔记(使用特殊字体实现特殊报表效果【转载】)
- python3.6.3+opencv3.3.0学习笔记七--人脸识别效果实录
- JQueryUI插件----手风琴效果(10级学员 赵成举课堂笔记)
- cocos2d-x学习笔记(五)仿真树叶飘落效果的实现(精灵旋转、翻转、钟摆运动等综合运用)
- jQuery学习笔记10:动画效果
- [转]Android笔记:OnGestureListener相关、滑动屏幕效果GestureDetector、OnGestureListener、ViewFlipper
- FLEX 笔记--组件的行为和动画效果
- 【安卓笔记】仿乐安全首页动态效果
- 陶仁贤学习笔记6(天空环境、阳光效果)