代码及实现效果如下
<style type="text/css"> .text{ width: 80px; height: 80px;/* 宽高 */ background-color: brown;/* 颜色 */ border-radius: 8px;/* 设置圆角 */ transform: perspective(8px)scale(1.1, 1.3) rotateX(5deg); /* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转5度 */ transform-origin: bottom left; /* bottom left = left bottom = 0 100% 中心点偏移量*/ border: 1px solid #ff9900; /* 边框 */ } </style> <div class="text"></div> <style type="text/css"> .text{ width: 80px; height: 80px;/* 宽高 */ background-color: brown;/* 颜色 */ border-radius: 8px;/* 设置圆角 */ transform: perspective(8px)scale(1.1, 1.3) rotateX(-5deg); /* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转-5度 */ transform-origin: top left; /* top left = left top = 0 0中心点偏移量*/ border: 1px solid #ff9900; /* 边框 */ } </style> <div class="text"></div>
