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. slub

    1.前言 在Linux中,伙伴系统(buddy system)是以页为单位管理和分配内存.但是现实的需求却以字节为单位,假如我们需要申请20Bytes,总不能分配一页吧!那岂不是严重浪费内存.那么该如 ...

  2. 集合（Java总结一）

    一.Queue 一个队列就是一个先入先出(FIFO)的数据结构 1.没有实现的阻塞接口的LinkedList: 实现了java.util.Queue接口和java.util.AbstractQueue ...

  3. 自定义配置文件读取产生的“无法添加已属于该配置的 ConfigurationSection”异常解决办法

    最近在编写一个读写自定义配置文件的功能时遇到一个问题,在初始化的时候读入配置显示出来,修改后把配置回存到配置文件,在回存的时候,先移除配置节,再添加,在添加的时候遇到如下的异常: {"无法添 ...

  4. 如何修改jar包的某一个class

    做了两年的开发,碰见了两次开源包的代码有问题,这次碰见的是wsdl4j.jar 具体问题以后再说,先说说如何修改其中的一个class 使用WinRAR打开(不是解压) 找到你要修改的class文件 右 ...

  5. js获取当天时间,7天前后时间,时间格式化

    格式化时间年月日时分秒 //时间戳转换方法 date:时间戳数字 formatDate(date) { var date = new Date(date); var YY = date.getFull ...

  6. 第七周课程总结&实验报考（五）

    第七周课程总结&实验报考(五) 实验四 类的继承 实验目的: 1.理解抽象类与接口的使用: 2.了解包的作用,掌握包的设计方法. 实验要求: 1.掌握使用抽象类的方法. 2.掌握使用系统接口的 ...

  7. 【转帖】联芸Maxio展示国产PCIe SSD主控：速度可达3.5GB/s

    联芸Maxio展示国产PCIe SSD主控:速度可达3.5GB/s https://www.cnbeta.com/articles/tech/855223.htm 国产主控 紫光做国产颗粒 国产器件对 ...

  8. 邀请好友注册页面光标点到输入框后，输入框会先灰一下。只有ios存在

    输入框会先灰一下.只有ios存在 用这一行代码可以解决问题: -webkit-tap-highlight-color:transparent;

  9. 安装ELK平台 7.3.0版本

    0. 事前准备工作 0.1 防火墙 若是使用公网IP的话可以考虑关闭防火墙,或者放行相应端口 使用内网IP的话可以不用管防火墙 0.2 关闭SElinux # setenforce 0 文件:/etc ...

  10. wpf prism加载独立模块实例

    一.首先看看文件的组织架构 module1 module2生成dll某块.Shell来显示管理模块 二,看看关键bootstrapper类 using System;using System.Coll ...