Css-控制div斜转
必须放在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斜转的更多相关文章
- css控制div显示/隐藏方法及2种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- css控制div的各种形状
css控制div的各种形状 CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形,从而可以减少图片的使用. 以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可 ...
- CSS控制div宽度最大宽度/高度和最小宽度/高度
在网页制作中经常要控制div宽度最大宽度/高度或者最小宽度/高度,但是在IE6中很多朋友都会遇到不兼容的头疼问题,包括我也经常遇到这样的问题,在百度查了很多都没法解决,后来在一个论坛上学习到,在这里跟 ...
- css控制div等比高度
在移动端开发中,在banner轮播图未加载出来之前,banner层是不占文档流高度的,当从服务器获取完banner数据,展示的时候,banner层因为有了内容 所以会撑开,导致banner层下面的内容 ...
- 用CSS控制DIV居中失效的解决方法
1.一般情况下DIV居中失效是因为没写DTD语句 在页面的最上方加上: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- css控制div下图片自适应解决方法:图片不超过最大宽度
我们(特别是像我一样的菜鸟)经常会遇到一个问题——图片自适应.这个问题是很普遍的.在文章区,在论坛,可以这么说:哪儿需要上传图片,哪儿就存在这个问题,而论坛上也不时有人询问.为什么?原因很简单,我们不 ...
- 前端学习笔记2017.6.12 CSS控制DIV
前一篇文章中用div布局了豆瓣东西的页面,如果用html代码表示的话大概是这个样子的 <!DOCTYPE html><html><head></head> ...
- Css控制div水平垂直居中显示
<style>#info{height:0px; width:0px;top:50%; left:50%;position:absolute;}#center{background:#FF ...
- css控制div强制换行
div{white-space:nowrap;} 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div{word-br ...
- css控制div上浮下落
CSS3 示例:http://www.w3school.com.cn/cssref/pr_keyframes.asp 以下是代码: <!DOCTYPE html> <html> ...
随机推荐
- Sass关于颜色函数的乐趣
阅读目录 1. 了解RGB和HSL颜色标准 2. RGB函数 3. HSL函数 4. Opacity函数 5. 其他颜色函数 6. 一个简单的应用 在Sass中,定义了很多现成的函数,可供我们使用.在 ...
- ORCHARD 是什么?
官网 http://orchard.codeplex.com 教程 http://www.cnblogs.com/sunjunlin/p/3876693.html [翻译]从头开始编写一个Orchar ...
- HTML 学习笔记 CSS样式(背景)
背景色 可以使用background-color属性为元素设置背景色 这个属性接受任何合法的颜色值. 可以使用background-image属性来喂元素设置背景图片. 背景重复 如果需要在页面上对背 ...
- window对象的screen详解
screen.availHeight 返回屏幕的高度(不包括Windows任务栏)screen.availWidth 返回屏幕的宽度(不包括Windows任务栏)screen.colo ...
- css相关问题
display:none和visibility:hidden的区别? 前几天遇到的这个问题,表格布局:::::display:none 隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢 ...
- Memcached和Memcache安装(64位win7)
一.Memcached和Memcache的区别: 网上关于Memcached和Memcache的区别的理解众说纷纭,我个人的理解是: Memcached是一个内存缓存系统,而Memcache是php的 ...
- PhoneGap: Android 自定义组件
Hello Core Demo Plugin Development(组件部署): http://docs.phonegap.com/en/2.0.0/guide_plugin-development ...
- 【6年开源路】海王星给你好看!FineUI v4.0正式版暨《FineUI3to4一键升级工具》发布!
去年10-28号,我发布了一篇文章<海王星给你好看!FineUI v4.0公测版发布暨<你找BUG我送书>活动开始>,标志着FineUI开始向4.0版本迈进.经过4个月3个公测 ...
- 一个看似很简单的SQL却难倒了很多人
一个选课表,有学生id,课程id,老师id,要求选出同时选了语文和数学的学生 USE [tempschool] GO /****** 对象: Table [dbo].[SelectC] 脚本日期: 0 ...
- Zepto的天坑汇总
前言 最近在做移动端开发,用的是zepto,发现他跟jquery比起来称之为天坑不足为过,但是由于项目本身原因,以及移动端速度要求的情况下,也只能继续用下去. 所以在这里做一下汇总 对img标签空sr ...