guopeiyuan
2016-04-01 13:59:57
证
最代码愚人节首页旋转倾斜特效代码分享
网上找的 ~~ 新奇 所以拿来分享。
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>IE浏览器CSS transform旋转属性的演示</title> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> <style type="text/css"> body { font-family: "Arial", sans-serif; } #ptOfRef { border: #000 solid 3px; background: #6FF; width: 204px; height: 204px; position: absolute; top: 100px; left: 100px; } #example { position: absolute; top: 100px; left: 100px; border: #09F solid 1px; background: #F90; font-weight: 900; color: #FFF; padding: 10px; display: block; width: 200px; height: 200px; margin-top: -1px; margin-left: -1px; transform: rotate(40deg); -o-transform: rotate(40deg); -webkit-transform: rotate(40deg); -moz-transform: rotate(40deg); filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779)"; } </style> <!--[if IE]> <style type="text/css"> #example { top: 50px; left: 50px; } </style> <![endif]--> </head> <body> <div id="ptOfRef"></div> <div id="example">这是一个CSS旋转属性的演示</div> </body> </html>
运行效果
猜你喜欢
请下载代码后再发表评论



maoye520 LV1
2024年10月8日
秋月常 LV1
2023年4月11日
上邪(ye) LV6
2021年12月8日
wjh12345654321 LV14
2021年9月7日
欧尼酱 LV2
2021年6月13日
小白小怪 LV10
2021年6月8日
喵小兵 LV10
2021年3月14日
jeeandsml LV1
2020年11月26日
思沫4955
2020年10月30日
暂无贡献等级
2602275348 LV12
2020年9月2日