以D之名；
有人说学好程序和英语好不好没关系，我不争辩，我特么默默地给你们介绍单词；
transform ；
发音 英[træns'fɔːm; trɑːns-; -nz-] 美[træns'fɔrm] ；
汉语发音：（英）船丝'form （美）船四'four；
谷歌翻译：转变；有道翻译：变形，改变；
动词；
在CSS中它是一个属性名，和单词释义一样，变化转变变形就是他的功能。属性值里有这些- 旋转：rotate；扭曲：skew；缩放：scale；移动：translate；矩阵变形：matrix；
旋转：我们全局定义一个div容器盒子和一个div背景盒子以及一个实现的旋转盒子；旋转45度；
transform:rotate(45deg);
style
.bg-box{margin:50px auto;background:#fff;padding:75px;width:200px;box-shadow:0 3px5px#ddd;color:#555;}
.box{width:100px;height:100px;margin:auto;background:#ddd;cursor:pointer;box-shadow:0 0 5px#cccinset;}
.fill{width:100px;height:100px;position:relative;background:#03A9F4;opacity:0.5;box-shadow:0 0 5px#ccc;transform:rotate(45deg);}
html
<div class='bg-box'><div class='box'><div class='fill'></div></div></div>
效果截图
实战中的用途：实现一个小三角折线效果
原理，将一个div渲染两条相邻边框，背景色：白；相对定位到这个位置；z-index比直线高，旋转四十五度。代码实在太繁琐，就不上传了，如果需要请联系我。
