展会信息港展会大全

div任意角度旋转解决方法 android软件开发教程
来源:互联网   发布日期:2016-03-25 16:26:42   浏览:1333次  

导读:下面我们一起来看一个关于利用css让div任意角度旋转的例子,希望此例子对各位同学会带来帮助哦。代码如下:代码如下复制代码 filter: progid:DXIma...

下面我们一起来看一个关于利用css让div任意角度旋转的例子,希望此例子对各位同学会带来帮助哦。

代码如下:

代码如下

复制代码

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779)";

你可以尝试一下,这个是大约40多度的角度。

尝试之后瞬间觉得很强大,但是还有个问题,那就是M11--M22哪里来的?

M11=cos(roation),M12=-sin(roation),M21=sin(roation),M22=cos(roation) roation就是你的角度喽,不过遗憾的是直接这样写不行的,你必须自己算出数字

最后补充一下,DXImageTransform.Microsoft.Matrix可以让你的div放大缩小,只要将M11--M22放大或缩小对应倍数就行了,不过现在的宽屏看着有误差埃

举例说明:

代码如下

复制代码

CSS

.test-b{ width:260px; height:186px; float:right;

-webkit-transform: rotate(30deg);

-moz-transform: rotate(30deg);

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.5, M22=0.866 03 )" }

html

<div class="test-b"><img src="../旅游】/images/middle-a.jpg" /></div>

再看个例子

代码如下

复制代码

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>DIV旋转属性的演示</title>

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

<style type="text/css">

body {

font-family: "Arial", sans-serif;

}

#example {

position: absolute;

border: #09F solid 1px;

font-weight: 900;

padding: 10px;

display: block;

width: 500px;

height: 400px;

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=1.2660444431189777, M12=-0.3327876096865394, M21=0.1127876096865398, M22=0.9660444431189779);

}

</style>

<!--[if IE]>

<style type="text/css">

#example {

top: 50px;

left: 50px;

}

</style>

<![endif]-->

</head>

<body>

<div id="example"> 旋转成功</div>

</body>

</html>

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港