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.  

6. <div style="transform: translate(80px, 80px)">

7. <div style="transform: scale(1.5, 1.5)">

8. <div style="transform: rotate(45deg)"></div>

9. </div>

10. </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.  

24. position:absolute;

25. width:10px;

26. height:10px;

27. background-color:skyBlue;

28. display:block;

29. font-size:0;

30. }

31. :root .diamond{filter:none\9;}/*ie9 hack*/

32.  

33. .tip-top{

34. border-top:1pxsolid blue;

35. border-left:1pxsolid blue;

36. left:10px;

37. top:-6px;

38. }

39. .tip-left{

40. border-bottom:1pxsolid blue;

41. border-left:1pxsolid blue;

42. left:-6px;

43. top:20px;

44. }

45. .tip-bottom{

46. border-bottom:1pxsolid blue;

47. border-right:1pxsolid blue;

48. left:10px;

49. bottom:-6px;

50. }

51. .tip-right{

52. border-top:1pxsolid blue;

53. border-right:1pxsolid blue;

54. right:-6px;

55. top:20px;

56. }

57.  

58. <div class="tips">

59. <i class="diamond tip-top"></i>

60. <i class="diamond tip-bottom"></i>

61. <i class="diamond tip-left"></i>

62. <i class="diamond tip-right"></i>

63. <div class="text"></div>

64. </div>

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