必须放在css声明中

div {
transform: rotate(45deg);
-o-transform: rotate(45deg);
float: right;
-webkit-transform: rotate(45deg); /*Safari 4+,Google Chrome 1+ */
-moz-transform: rotate(45deg); /*Firefox 3.5+*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5);
/*ie*/
progid: DXImageTransform.Microsoft.BasicImage(rotation=1);
color: #FFDC93;
font-weight: bold;
font-size: 16px;
}

IE滤镜 rotation 有4个值 0 1 2 3 ;0是不旋转 1=90度 2=180度 3=270度

IE的角度任意角度就比较麻烦,要用ie矩阵滤镜,代码如下:

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就是你的角度喽,不过遗憾的是直接这样写不行的,你必须自己算出数字,这里附赠一个算三角函数的在线无网址:http://www.ab126.com/geometric/1689.html.

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

Css-控制div斜转的更多相关文章

  1. css控制div显示/隐藏方法及2种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  2. css控制div的各种形状

    css控制div的各种形状 CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形,从而可以减少图片的使用. 以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可 ...

  3. CSS控制div宽度最大宽度/高度和最小宽度/高度

    在网页制作中经常要控制div宽度最大宽度/高度或者最小宽度/高度,但是在IE6中很多朋友都会遇到不兼容的头疼问题,包括我也经常遇到这样的问题,在百度查了很多都没法解决,后来在一个论坛上学习到,在这里跟 ...

  4. css控制div等比高度

    在移动端开发中,在banner轮播图未加载出来之前,banner层是不占文档流高度的,当从服务器获取完banner数据,展示的时候,banner层因为有了内容 所以会撑开,导致banner层下面的内容 ...

  5. 用CSS控制DIV居中失效的解决方法

    1.一般情况下DIV居中失效是因为没写DTD语句 在页面的最上方加上: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

  6. css控制div下图片自适应解决方法:图片不超过最大宽度

    我们(特别是像我一样的菜鸟)经常会遇到一个问题——图片自适应.这个问题是很普遍的.在文章区,在论坛,可以这么说:哪儿需要上传图片,哪儿就存在这个问题,而论坛上也不时有人询问.为什么?原因很简单,我们不 ...

  7. 前端学习笔记2017.6.12 CSS控制DIV

    前一篇文章中用div布局了豆瓣东西的页面,如果用html代码表示的话大概是这个样子的 <!DOCTYPE html><html><head></head> ...

  8. Css控制div水平垂直居中显示

    <style>#info{height:0px; width:0px;top:50%; left:50%;position:absolute;}#center{background:#FF ...

  9. css控制div强制换行

    div{white-space:nowrap;} 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div{word-br ...

  10. css控制div上浮下落

    CSS3 示例:http://www.w3school.com.cn/cssref/pr_keyframes.asp 以下是代码: <!DOCTYPE html> <html> ...

随机推荐

  1. [No000009]学习重要还是经营人脉重要?

    大说数人的朋友圈都是这样的:雪中送炭的寥寥无几,锦上添花的大多数人连你自己都不认识,碰到倒霉的时候还能遇到落进下石的.人脉是很重要,可相对自身的学习来说,就没有想象中那么重要了. 有一次在北大讲座,遇 ...

  2. 转:windows下命令行工具

    转自: http://www.cnblogs.com/haochuang/p/5593411.html Windows下CMD不好用,远没有Linux,或者一些SSH工具用起来方便.其实Windows ...

  3. 改变TableView中的分割线位置

    加上以下代码,可以让系统的分割线位置置于起始位置 #pragma mark --- 设置分割线位置为起始位置-(void)viewDidLayoutSubviews{    if ([self.tab ...

  4. JLOI2016 方

    bzoj4558 真是一道非常excited的题目啊-JLOI有毒 题目大意:给一个(N+1)*(M+1)的网格图,格点坐标为(0~N,0~M),现在挖去了K个点,求剩下多少个正方形(需要注意的是正方 ...

  5. 怎样使用nat和桥接方式解决虚拟机联网问题

    对于很多的linux初学者来说,最开始学习linux时通常是在虚拟机上进行的,然而对于新手来说虚拟机联网会对他们来说是比较困难的.这里我根据自己的经验写了一篇文档分享给大家.下面对几种连接方式进行简单 ...

  6. Java 集合系列05之 LinkedList详细介绍(源码解析)和使用示例

    概要  前面,我们已经学习了ArrayList,并了解了fail-fast机制.这一章我们接着学习List的实现类——LinkedList.和学习ArrayList一样,接下来呢,我们先对Linked ...

  7. [转]git fetch 的简单用法:更新远程代码到本地仓库

    [原文地址]:http://my.eoe.cn/com360/archive/3533.html Git中从远程的分支获取最新的版本到本地方式如下,如何更新下载到代码到本地,请参阅ice的博客基于Gi ...

  8. React Native开发技术周报1

    (一).资讯 1.React Native 0.21版本发布,最新版本功能特点,修复的Bug可以看一下已翻译 重要:如果升级 Android 项目到这个版本一定要读! 我们简化了 Android 应用 ...

  9. Java7并发编程实战(一) 线程的等待

    试想一个情景,有两个线程同时工作,还有主线程,一个线程负责初始化网络,一个线程负责初始化资源,然后需要两个线程都执行完毕后,才能执行主线程 首先创建一个初始化资源的线程 public class Da ...

  10. 小记sql server临时表与表变量的区别

    临时表与表变量都可以起到“临时”的作用,那么两者主要的区别是什么呢? 这里不讨论创建方式,以及全局临时表.会话临时表这些,主要记录一下个人对两者的主要区别以及适用情况的看法,有什么不对或补充的地方,欢 ...