大家还在为页面中添加各种箭头而烦恼吗?当然。这些完全可以用图片代替,但是为了更好的用户体验和保证代码的简化上,我们完全可以使用css的伪元素来代替,具体做法如下
.le {
position: relative;
padding-left: 15px;
padding-right: 30px;
height: 2.58823529em;
min-height: 2.58823529em;
line-height: 2.58823529em;
border-right: 1rpx solid #D9D9D9;
}
.le:before {
content: " ";
display: inline-block;
height: 6px;
width: 6px;
border-width: 0px 0px 2px 2px;
border-color: #C8C8CD;
border-style: solid;
-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
position: absolute;
top: 50%;
right: 10px;
}
上面显示的是左箭头,如果需要上下左右哪一个可以更改border-width来设置,箭头的宽高都是可以自己设置的
另外一种做法如下,直接旋转
.le{ width: 10px;
height: 10px;
border: 1px solid red;
color: red;
overflow: hidden;
border-top: 2px solid #ffffff;
border-right: 2px solid #ffffff;
transform: rotate(-135deg);
margin-top: 10px;
}
至于用这种的好处,行家都懂就不言而喻了吧,以上代码最难的一点莫过于transform 中的matrix了,至于他的用法大家可以参考简书上ferrint写的一片文章,个人感觉很不错,全文复制过来,节省大家时间
css最为人称道的优点之一就是增加了transform
功能,用它来配黑transition
可是不用js就能够实现优美的动画效果,css3提供了四种变换方法位移,缩放,旋转,斜切
简单演示下效果:
* <div class="box"></div>
/* CSS代码 */
.box{
width: 100px;
height: 100px;
box-sizing: content-box;
background-color: #eee;
border:1px solid #ccc;
transition: 1s;
}
.box:hover{
transform: skew(35deg); /* 斜切 */
transform:scale(1, 0.5); /* 缩放 */
transform:rotate(45deg); /* 旋转 */
transform:translate(10px, 20px); /* 位移 */
}
那这些方法是怎么实现的呢,其实都是通过矩阵的方式做出来的,
matrix功能实现
一提到矩阵是不是联想到线性代数啦,突然间好方( ⊙ o ⊙ )啊!其实并不难,用到的都是简单的矩阵
旋转、压缩、斜切等,本质上都是应用的matrix()方法实现的(修改matrix()方法固定几个值),只是类似于transform:rotate这种表现形式,我们更容易理解,记忆与上手。
写法是这样的
* transform: matrix(a,b,c,d,e,f);
六个参数对应的矩阵:
矩阵
其变化的方法:
变换公式
什么意思呢?
- ax+cy+e表示变换后的水平坐标,
- bx+dy+f 表示变换后的垂直位置。
位移(displace)
* transform: matrix(1, 0, 0, 1, 100, 100); /* a=1, b=0, c=0, d=1, e=100, f=100 */
变换后:
- x坐标 : ax+cy+e = 10+00+30 =30,
- y坐标 : bx+dy+f = 00+10+30 =30.
缩放(scale)
* transform: matrix(3, 0, 0, 0.5, 0, 0);
其实就是这样一个公式
*比例是 s,则有matrix(s, 0, 0, s, 0, 0);第一个s代表x轴,第二个s代表y轴。
- x' = ax+cy+e = sx+0y+0 = s*x;
- y' = bx+dy+f = 0x+sy+0 = s*y;
旋转(rotate)
* transform: matrix(0.866025,0.500000,-0.500000,0.866025,0,0); // 旋转30度
- matrix(cosθ,sinθ,-sinθ,cosθ,0,0)
- x' = xcosθ-ysinθ+0 = xcosθ-ysinθ
- y' = xsinθ+ycosθ+0 = xsinθ+ycosθ
拉伸(skew)
* transform: matrix(1,0,0.75,1,0,0);
- matrix(1,tan(θy),tan(θx),1,0,0)
- x' = x+ytan(θx)+0 = x+ytan(θx)
- y' = xtan(θy)+y+0 = xtan(θy)+y