下载掌阅APP，畅读海量书库
立即打开
完成倒过来的福字布局，如图2-10所示。
图2-10 倒福字布局
1）页面中有一个棱形红底的区域。
2）棱形中心有一个倒写的“福”字。
1 打开index.wxml，添加＜view class="box"＞、＜view class="txt"＞组件。
在样式设置中，对元素进行旋转，可以使用transform属性。transform: rotate（45deg）实现顺时针旋转45°。
2 打开index.wxss，添加.box、.txt等样式，实现视图效果，如图2-10所示。
例：
transform:rotate（45deg）可实现顺时针旋转45°。
例：
z-index:100、z-index:10。
z-index的数字越大，层次越靠前，值为整数且不用带单位。z-index有时存在无效果的异常，一般是因为缺少了position的设置。当position属性值为absolute、relative或fixed时，用z-index取值方可生效。