您的位置：首页 > Web前端 > CSS

IE浏览器CSS transform旋转属性的演示

2014-07-08 09:06 357 查看
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航