D-前端笔记CSS-transform

以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渲染两条相邻边框，背景色：白；相对定位到这个位置；z-index比直线高，旋转四十五度。代码实在太繁琐，就不上传了，如果需要请联系我。