上一篇
下一篇
简单css3-transform鼠标效果
作者:admin 日期:2015-04-18
测试页地址：http://blog.258754.cn/2015/flower/trf.html
效果比较简单，一般基础都能写出。主要是考虑此类效果比较常用，我自己做了一下思路整理，以便于工作中快速调用。
首先是把transition提炼成一个单独的class，这样调用时只要这样写就行了：
XML/HTML代码
- .trans {transition: all 0.5s ease-in-out;}
- .trans03{transition: all 0.3s ease-in-out;}
- .trans08{transition: all 0.8s ease-in-out;}
- //调用时这样写
- <div class="tit trans">变化稍慢<br />Y轴转动</div>
接下是熟悉transform的emmet速写，不熟悉emmet的朋友请自行百度
XML/HTML代码
- trf transform:;
- trf:r transform: rotate(angle);
- trf:rx transform: rotateX(angle);
- trf:ry transform: rotateY(angle);
- trf:rz transform: rotateZ(angle);
- trf:sc transform: scale(x, y);
- trf:sc3 transform: scale3d(x, y, z);
- trf:scx transform: scaleX(x);
文章来自: 
引用通告: 
Tags: 
相关日志:
评论: 0 | 引用: 0 | 查看次数: 5082
发表评论
