css3之transform的应用

一、利用transform实现图片额外显示

效果图如下

初始状态：

鼠标移上去之后：

背景色的问题鼠标移上去之后图片变的模糊一些了。

关键是显示右下角的白色部分，在figcation里面除了添加了文字内容，还添加了一个div。用这个div来达到我们想要的右下角白色区域的效果。思路：先给div设置足够的宽高，然后给div设置背景色，刚开始设置div隐藏，用transform中的translate属性，将div位置设置在图片外面。当鼠标放在图片上面时，给div重设位置，让其显示在图片中。关键是不要让这块白色的div在图片中显示太多，前面通过transform中的translate将div移除了图片，现在要它重新在图片中显示，一定要重新用transform中的translate设置div的位置，让其在图片中显示（因为我刚开始做的时候忘了这一步，所以半天才弄出来），然后让div在鼠标放上去的时候同时旋转一定的角度（用transform中的rotate（）方法），就可以了。之前有人说用transform-origin将旋转基点设置为图片的左下角，然后再让div旋转一定角度，这个方法没有试成功。后来才发现完全可以不用tranform-origin方法。

html代码：

css代码：

学习更多CSS3属性transform可参考：http://www.bbs0101.com/archives/248.html