代码及实现效果如下
<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>