ransform是CSS3提供用于元素变形的属性，目前支持平移、旋转、缩放和倾斜效果，使用transfrom属性的元素，也不会影响x、y轴上的任何组件。
一： 2D
1、旋转 rotate
2、位移 translate、translateX、translateY
3、缩放 scale、scaleX、scaleY
缩放scale()函数让元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值，使一个元素缩小；而任何大于或等于1.01的值，让元素显得更大。
4、倾斜skew、skewX、skewY
二、3D
除了2d的属性外；还有
1、perspective-origin（perspective-origin属性是3D变形中另一个重要属性，主要用来决定perspective属性的源点角度。它实际上设置了X轴和Y轴位置，在该位置观看者好像在观看该元素的子元素。）
2、transform-origin （transform-origin用来设置元素的变形原点，默认情况，变形的原点在元素的中心点。）
3、backface-visibility （backface-visibility属性决定元素旋转背面是否可见。
语法： backface-visibility: hidden|| visible）
三，实例
1、立方体
效果：
HTML：
<body>
<div class="cube"><div class="left">left</div><div class="right">right</div><div class="top">top</div><div class="bottom">bottom</div><div class="front">front</div><div class="behind">behind</div>
</div></body>
css:
.cube{width: 200px;height: 200px;text-align: center;line-height: 200px;font-size: 60px;position: relative;transform-style: preserve-3d;color:#fff;margin: auto;transition:all 3s;}.cube:hover{transform:rotate3d(1,1,1,360deg);}.cube>div{position: absolute;height: 100%;width: 100%;}.front{transform: translateZ(100px);background-color: red;}/*先位移在旋转*/.behind{transform: translateZ(-100px) rotateX(180deg);background-color: blue;}.left{transform: translateX(-100px) rotateY(-90deg);background-color: purple;}.right{transform: translateX(100px) rotateY(90deg);background-color: pink;}.bottom{transform: translateY(100px) rotateX(-90deg);background-color: green;}.top{transform: translateY(-100px) rotateX(90deg);background-color: black;}
2、圆形布局
效果：
HTML：
<body><div class="box"><div><span>1</span></div><div><span>2</span></div><div><span>3</span></div><div><span>4</span></div><div><span>5</span></div><div><span>6</span></div><div><span>7</span></div><div><span>8</span></div><div><span>9</span></div><div><span>10</span></div><div><span>11</span></div><div><span>12</span></div></div>
</body>
css：
*{box-sizing: border-box;}.box{width: 400px;height: 400px;border:5px solid #333;border-radius: 100%;position: relative;margin: auto;}.box div{font-size: 30px;text-align: center;position: absolute;top:5px;left:0;right:0;height: 30px;line-height: 30px;width: 40px;margin: auto;transform-origin: center 190px;/*400/2-5-5,半径-border-top*/}.box span{display: inline-block;}.box div:nth-child(1){transform: rotate(30deg);}.box div:nth-child(1) span{transform: rotate(-30deg);}.box div:nth-child(2){transform: rotate(60deg);}.box div:nth-child(2) span{transform: rotate(-60deg);}.box div:nth-child(3){transform: rotate(90deg);}.box div:nth-child(3) span{transform: rotate(-90deg);}.box div:nth-child(4){transform: rotate(120deg);}.box div:nth-child(4) span{transform: rotate(-120deg);}.box div:nth-child(5){transform: rotate(150deg);}.box div:nth-child(5) span{transform: rotate(-150deg);}.box div:nth-child(6){transform: rotate(180deg);}.box div:nth-child(6) span{transform: rotate(-180deg);}.box div:nth-child(7){transform: rotate(210deg);}.box div:nth-child(7) span{transform: rotate(-210deg);}.box div:nth-child(8){transform: rotate(240deg);}.box div:nth-child(8) span{transform: rotate(-240deg);}.box div:nth-child(9){transform: rotate(270deg);}.box div:nth-child(9) span{transform: rotate(-270deg);}.box div:nth-child(10){transform: rotate(300deg);}.box div:nth-child(10) span{transform: rotate(-300deg);}.box div:nth-child(11){transform: rotate(330deg);}.box div:nth-child(11) span{transform: rotate(-330deg);}
3、六菱形 (实现原理通过三个长方形旋转角度重叠中间部分而成)
效果：
HTML：
<body><div></div>
</body>
css:
body{margin-top:300px;}div{width: 100px;height: 57.73px;background-color: lightsalmon;position: relative;}div:after,div:before{content:'';position: absolute;top:0;left:0;width: inherit;height: inherit;background-color: inherit;}div:after{transform: rotate(-60deg);}div:before{transform: rotate(60deg);}