<!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>
