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. 关于eclipse安装插件的问题

    使用eclipse(luna)不行,其为安装了ee有关插件的 使用eclipse(Juno)可以,其为原生版本

  2. 阶段3 2.Spring_10.Spring中事务控制_7 spring基于注解的声明式事务控制

    创建新项目 复制上一个pom.xml的内容.依赖和打包的方式 再复制src的代码过来 bean.xml.多导入context的声明 Service的实现类增加注解 dao的set方法删掉 通过Auto ...

  3. Linux监控命令之==>lsof

    一.命令说明 lsof 命令的原始功能是列出打开的文件的进程,但LINUX 下,所有的设备都是以文件的行式存在的,所以,lsof 的功能很强大. 二.参数说明 -a :列出打开文件存在的进程 -c&l ...

  4. SQL Server 批量创建作业（备份主分区）

    一. 需求背景 在我的数据库实例中,有很多类似下图所示的数据库,这些数据库的名称是有规律的,每个数据库包含的表都是相同的,其中2个表是类似流水记录的表,表的数据量会比较大,占用的空间有几十G到上百G不 ...

  5. document的属性操作

    document对象: 1.直接操作: 对象.属性 = 值; 如下面一段代码: <a href  = "...">跳转</a> <script> ...

  6. UniEAP Platform V5.0 Unable to compile class for JSP

    流程设计器报错: http://127.0.0.1:8080/framework/workflow/webdesign/procmodify/procmodifydetail.jsp?isLoadDa ...

  7. elasticsearch mappings之dynamic的三种状态

    目录 前言 动态映射(dynamic:true) 静态映射(dynamic:false) 严格模式(dynamic:strict) 返回主目录 前言 回到顶部 一般的,mapping则又可以分为动态映 ...

  8. Day01:对象和类(上)

    对象的概念 Java 是面向对象的编程语言,对象就是面向对象程序设计的核心.所谓对象就是真实世界中的实体,对象与实体是一一对应的,也就是说现实世界中每一个实体都是一个对象,它是一种具体的概念.对象有以 ...

  9. 【PI系列】SAP IDOC发送状态03，PI没有收到消息的解决办法

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[PI系列]SAP IDOC发送状态03,PI没 ...

  10. Ubuntu16.04安装NVIDIA驱动、实现GPU加速

    NVIDIA驱动前前后后装了好几遍,下面把个人的经验分享下,大家仅供参考. 老规矩,先引用师兄的(最详细)https://blog.csdn.net/sinat_23853639/article/de ...