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 */

}

下面为实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>无标题文档</title>

<style>

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 */

}

</style>

</head>

<body>

<div class="list">

<a class="imghref" href="#"><img class="rotate" alt="" src="http://t3.qpic.cn/mblogpic/4c2f2cadc3ceaa27cbc2/460"></a>

<p class="desc">zencart模板</p>

</div>

</body>

</html>

CSS3 transform 属性 旋转 div 元素的更多相关文章

  1. CSS3 transform 属性

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

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

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

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

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

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

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

  5. css3 transform属性多值的顺序问题

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

  6. CSS3 transform属性

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

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

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

  8. CSS3 resize属性 调整div大小

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

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

    积累很重要.从此开始记录前端生涯的点滴.... <!DOCTYPE html><html lang="en"><head> <meta c ...

随机推荐

  1. Android Context完全解析与各种获取Context方法

    Context类型 我们知道,Android应用都是使用Java语言来编写的,那么大家可以思考一下,一个Android程序和一个Java程序,他们最大的区别在哪里?划分界限又是什么呢?其实简单点分析, ...

  2. hive跑mapreduce报java.lang.RuntimeException: Error in configuring object

    写于2016.7月 最近项目需要在hbase上做统计分析,在本机上装了hive,结果跑小批量数据sum时报错: hive> select count(*) from page_view; Tot ...

  3. Android 中布局的优化措施都有哪些？

    1.尽可能减少布局的嵌套层级可以使用 sdk 提供的 hierarchyviewer 工具分析视图树,帮助我们发现没有用到的布局.2.不用设置不必要的背景,避免过度绘制比如父控件设置了背景色,子控件完 ...

  4. Python解决数据样本类别分布不均衡问题

    所谓不平衡指的是:不同类别的样本数量差异非常大. 数据规模上可以分为大数据分布不均衡和小数据分布不均衡.大数据分布不均衡:例如拥有1000万条记录的数据集中,其中占比50万条的少数分类样本便于属于这种 ...

  5. Dart 基本语法

    ?? // 如果b为null则赋值,否则保持原样 b ??= value; 级联符号.. querySelector('#confirm') // Get an object. ..text = 'C ...

  6. consumeQueue 和 indexFile 文件

    broker 把消息写入 commitLog 后,还需要把消息的索引写入 consumeQueue 文件 和 indexFile 文件 // org.apache.rocketmq.store.Def ...

  7. mysql--创建表，插入数据，修改表名，删除表，简单查询/内连接、左/右连接

    创建表mm:  其中id为主键且自增长 ) primary key not null unique auto_increment, name ) not null, age ), class ) no ...

  8. fiddler抓取app的https的包

    线上问题的排查有时候需要抓包,但是是https协议的,则需要安装证书 在Android 6.0 (API level 23)及以前,APP默认信任系统自带的CA证书以及用于导入的CA证书,Androi ...

  9. 使用多个fixture和fixture直接互相调用

    使用多个fixture 如果用例需要用到多个fixture的返回数据,fixture也可以return一个元组.list或字典,然后从里面取出对应数据. # test_fixture4.py impo ...

  10. playbook部署mangodb

    playbook文件 [root@localhost ~]# cat deploy_mongo.yaml --- - hosts: webservers become: yes become_meth ...