css让div旋转,CSS3 transform 属性 旋转 div 元素

div

{

transform:rotate(7deg);

-ms-transform:rotate(7deg); /* IE 9 */

-moz-transform:rotate(7deg); /* Firefox */

-webkit-transform:rotate(7deg); /* Safari 和 Chrome */

-o-transform:rotate(7deg); /* Opera */

}

下面为实例

无标题文档

div{ width:244px; height:200px}

.rotate {

border: 8px solid #fff;

box-shadow: 0 0 5px 0 #747474;

}

.rotate {

overflow: hidden;

transition-duration: 0.4s;

transition-property: transform;

}

.rotate:hover {

transform: rotate(2deg);

-ms-transform:rotate(2deg); /* IE 9 */

-moz-transform:rotate(2deg); /* Firefox */

-webkit-transform:rotate(2deg); /* Safari 和 Chrome */

-o-transform:rotate(2deg); /* Opera */

}

zencart模板

CSS3 transform 属性

CSS3 transform 属性 语法: transform: none|transform-functions; 值 描述 none 定义不进行转换. matrix(n,n,n,n,n,n) 定义 ...

css3之transform属性实现div不定宽高垂直水平居中

transform的作用 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜.(w3cschool) transform的兼容性 transfor ...

CSS3 transform 属性(2D,3D旋转)

一.语法 div{ transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg) ...

【CSS3 transform属性和过渡属性详解】

CSS3transform属性详解 transform字面上就是变形,改变的意思. 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translat ...

css3 transform属性多值的顺序问题

对于transform属性的多值的顺序问题,我自己就被困扰过.后来知道了跟顺序有关,但是不知道为什么.我想应该很多人跟我以前一样,知其然不知其所以然.如果不知道的,也许这篇文章会对大家有所帮助. 先来 ...

CSS3 transform属性

说明: transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行移动(translate).旋转(rotate).缩放(scale)或倾斜(skew) transition属 ...

CSS3 transform 属性详解(skew, rotate, translate, scale)

写这篇文章是因为在一个前端QQ群里,网友 "小豆豆" (应他要求要出现他的网名......) ,问skew的角度怎么算,因为他看了很多文章还是不能理解skew的原理.于是,我觉得有 ...

CSS3 resize属性 调整div大小

resize 用户可调整div大小  IE不支持 none 不可调整元素尺寸 both 可调整宽度高度 horizontal 可调整宽度 vertical 可调整高度 注意:如果属性生效,必须设置元素 ...

商品标签例子——CSS3 transform 属性

积累很重要.从此开始记录前端生涯的点滴....

随机推荐

MTK MT33xx型GPS的NMEA协议解析实例

1)解析实现 gps_main.c #include #include #include #i ...

qt 编译问题总结

1)使用make命令编译Qt原码时出现了 /usr/bin/ld: cannot find -lXrender 问题: /usr/bin/ld: cannot find -lXrender      ...

cf319.B. Modulo Sum(dp && 鸽巢原理 && 同余模)

B. Modulo Sum time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...

MVC记录

MVC这三层分别要完成哪些工作呢? 1.M层 模型(更多的是数据库模型) (1)创建数据库.创建相应的表 (2)完成针对数据库各个表的增.删.改.查的操作类 (3)映射数据库各个表的实体类(这个实体类 ...

IIS配置(安装IIS、.Net、更改IIS Log目录位置)

#安装IIS..NetFramework 3.5 Import-Module servermanager Get-WindowsFeature web-* | ? {$_.Name -ne &quot ...

Unix/Linux环境C编程入门教程(29) 内存操作那些事儿

函数介绍 memccpy(拷贝内存内容) 相关函数 bcopy,memcpy,memmove,strcpy,strncpy 表头文件 #include 定义函数 voi ...

OS之多线程

os中引入进程的目的是,为了描述和实现多个程序的并发执行,以改善资源利用率及提高系统的吞吐量. 为什么要引入线程?这是为了减少程序并发执行时系统所付出的额外开销(堆栈切换的开销等),使os具有更好的并 ...

java常用的环境变量配置

JDK配置 JAVA_HOME: C:\java\jdk1.7.0 CLASSPATH: .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar; PAT ...

使用Python对Twitter进行数据挖掘(Mining Twitter Data with Python)

目录 1.Collecting data 1.1 Register Your App 1.2 Accessing the Data 1.3 Streaming 2.Text Pre-processin ...

【PyQt5-Qt Designer】浅谈关闭窗口

1.关闭全部窗口(主窗口+所有的子窗口) 在逻辑界面中写入 sys.exit(0) 2.关闭子窗口(其他窗口不关闭) self.close()