CSS3向下兼容的Tip

嗨，guys，还在为上下左右的tip揪心嘛，还在使用利用图片、符号、多层关系或者border的2个三角形的重叠来实现？ 既然它不完美，那就来看一下利用CSS3的transfrom的方法是否适合你。

概述：

CSS视觉格式化模型描述一个坐标系统上的每个元素位置的坐标系。定位和大小在这个坐标空间可以被认为是用像素表示,在起源点开始以向右和向下的实际值出发。transform属性可以修改此坐标空间。使用转换，元素可以被转化、旋转和扩展在二或三维空间。

重点来了~我们要用到的是transfroms的变换渲染模型：

为‘ transform ‘的属性建立一新的局部坐标系元素将它应用到指定‘ none ‘以外的值。 通过元素的变换矩阵，局部坐标系统会渲染成元素的映射 。 转换是累加的。 也就是说，元素在他们的父坐标系统建立其局部坐标系统。 从用户的角度看，一个元素有效积累所有的transform属性以适用于其祖先以及任何局部的改变。这些transform的积累为元素定义通用变换矩阵（CTM）。

EXAMPLE

1. div {
2. transform:translate(100px,100px);
3. }

此变换100像素在X和Y方向移动的元素。

EXAMPLE

1. div {
2. height:100px;width:100px;
3. transform:translate(80px,80px)scale(1.5,1.5)rotate(45deg);
4. }
5. <div style="transform: translate(80px, 80px)">
6. <div style="transform: scale(1.5, 1.5)">
7. <div style="transform: rotate(45deg)"></div>
8. </div>
9. </div>

此变换移动80像素元素在X和Y方向，然后由150％尺度的元素，那么它的Z轴顺时针旋转45°。 需要注意的规模和旋转操作元素的中心，因为该元素具有“改造来源的50% 50%的默认。需要注意的是相同的渲染，可以由嵌套元素的等效变换得到。

ok 书归正传，Tip来了，总共分为两步：

1.我们要创建一个有border的四方形，用CSS3 transfrom 作 45 度旋转。

2.IE的实现-利用 IE 的 matrix filter 实现 css3 transfrom 的兼容方案。

EXAMPLE

1. .tips {
2. width:200px;
3. position:relative;
4. padding:10px;
5. border:1pxsolid blue;
6. background-color:skyBlue;
7. border-radius:5px;
8. }
9. .diamond{
10. -ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865475, SizingMethod=‘auto expand‘)";
11. filter:progid:DXImageTransform.Microsoft.Matrix(
12. M11=0.7071067811865475,
13. M12=-0.7071067811865477,
14. M21=0.7071067811865477,
15. M22=0.7071067811865475,
16. SizingMethod=‘auto expand‘
17. );
18. -moz-transform:rotate(45deg);
19. -o-transform:rotate(45deg);
20. -webkit-transform:rotate(45deg);
21. -ms-transform:rotate(45deg);
22. transform:rotate(45deg);
23. position:absolute;
24. width:10px;
25. height:10px;
26. background-color:skyBlue;
27. display:block;
28. font-size:0;
29. }
30. :root .diamond{filter:none\9;}/*ie9 hack*/
31. .tip-top{
32. border-top:1pxsolid blue;
33. border-left:1pxsolid blue;
34. left:10px;
35. top:-6px;
36. }
37. .tip-left{
38. border-bottom:1pxsolid blue;
39. border-left:1pxsolid blue;
40. left:-6px;
41. top:20px;
42. }
43. .tip-bottom{
44. border-bottom:1pxsolid blue;
45. border-right:1pxsolid blue;
46. left:10px;
47. bottom:-6px;
48. }
49. .tip-right{
50. border-top:1pxsolid blue;
51. border-right:1pxsolid blue;
52. right:-6px;
53. top:20px;
54. }
55. <div class="tips">
56. <i class="diamond tip-top"></i>
57. <i class="diamond tip-bottom"></i>
58. <i class="diamond tip-left"></i>
59. <i class="diamond tip-right"></i>
60. <div class="text"></div>
61. </div>

参考阅读： http://www.w3.org/TR/2012/WD-css3-transforms-20120403