CSS3向下兼容的Tip

浏览数：22 / 时间：2015年06月09日

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

概述：

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

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

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

EXAMPLE

div {
transform:translate(100px,100px);
}

技术分享

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

EXAMPLE

div {
height:100px;width:100px;
transform:translate(80px,80px)scale(1.5,1.5)rotate(45deg);
}
<div style="transform: translate(80px, 80px)">
<div style="transform: scale(1.5, 1.5)">
<div style="transform: rotate(45deg)"></div>
</div>
</div>

技术分享

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

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

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

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

技术分享

EXAMPLE

.tips {
width:200px;
position:relative;
padding:10px;
border:1pxsolid blue;
background-color:skyBlue;
border-radius:5px;
}
.diamond{
-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865475, SizingMethod=‘auto expand‘)";
filter:progid:DXImageTransform.Microsoft.Matrix(
M11=0.7071067811865475,
M12=-0.7071067811865477,
M21=0.7071067811865477,
M22=0.7071067811865475,
SizingMethod=‘auto expand‘
);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
position:absolute;
width:10px;
height:10px;
background-color:skyBlue;
display:block;
font-size:0;
}
:root .diamond{filter:none\9;}/*ie9 hack*/
.tip-top{
border-top:1pxsolid blue;
border-left:1pxsolid blue;
left:10px;
top:-6px;
}
.tip-left{
border-bottom:1pxsolid blue;
border-left:1pxsolid blue;
left:-6px;
top:20px;
}
.tip-bottom{
border-bottom:1pxsolid blue;
border-right:1pxsolid blue;
left:10px;
bottom:-6px;
}
.tip-right{
border-top:1pxsolid blue;
border-right:1pxsolid blue;
right:-6px;
top:20px;
}
<div class="tips">
<i class="diamond tip-top"></i>
<i class="diamond tip-bottom"></i>
<i class="diamond tip-left"></i>
<i class="diamond tip-right"></i>
<div class="text"></div>
</div>