css2014-08-14 06:02:23 10976
CSS3实现的一个简单的图片旋转以及移动特效,使用的是transform属性。浏览示例请在IE9及以上或者其他支持CSS3transform的浏览器上浏览。
代码:
#contentMain{ margin-bottom:50px; } .Item { width: 150px; height: 150px; margin-top: 100px; margin-left: 300px; position: absolute; } .Item2 { margin-left: 500px; position: absolute; } .Item>img { width: 150px; height: 150px; position: absolute; border: 3px solid #fff; -webkit-box-shadow: 1px 0px 15px #ccc; -moz-box-shadow: 1px 0px 15px #ccc; box-shadow: 1px 0px 15px #ccc; transition-duration: .5s; } .Item>img:nth-child(1) { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); transform: rotate(10deg); } .Item>img:nth-child(2) { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); transform: rotate(-10deg); } .Item:hover img:nth-child(2) { margin-left: -150px; -webkit-transform: rotate(-370deg); -moz-transform: rotate(350deg); transform: rotate(350deg); } .Item:hover img:nth-child(1) { -webkit-transform: rotate(370deg); -moz-transform: rotate(370deg); transform: rotate(370deg); margin-left: 150px; }
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:CSS3图片旋转
文章固定链接:https://www.pengyaou.com/legendsz/front/codecss/ODk=.html
下一篇 CSS3漂亮表格