<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> /*例一*/ .eg1:before{ content: ''; position: absolute; z-index: 1000; top:50%; transform: translate(-50%,-50%); width: 50px; height: 50px; border-radius: 50%; background: #fff; box-shadow: 4px 0 0 #ddd; } .eg1{-webkit-perspective: 180;} .eg1:after{ content: '旋转'; position: absolute; z-index: 1000; top:13%; left: 64%; transform: rotateY(-65deg); width: 100px; height: 60px; background: #F8B551; box-shadow: 3px 0 0 #eee; /*transform: ;*/ } /*例二*/ .eg2:after{ color: #ddd; font-size: 5px; content: '可旋转为水平波浪线'; position: absolute; width: 10px; height: 100%; z-index: 1000; right: 0%; background: #fff; background-size: 2rem .66rem; /*transform: rotate(-90deg);*/ background-image:linear-gradient(-45deg,#e5004f 25%,transparent 25%,transparent),linear-gradient(-135deg,#e5004f 25%,transparent 25%,transparent),linear-gradient(-45deg,transparent 75%,#e5004f 75%),linear-gradient(-135deg,transparent 75%,#e5004f 75%); } </style> </head> <body> <div class="eg1" style="width: 300px;height: 80px;background: #378AE8;position: relative;overflow:hidden;"></div> <hr/> <div class="eg2" style="width: 300px;height: 80px;background: #e5004f;position: relative;"></div> </body> </html>