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. DeepFaceLab错误：DLL Load failed 找不到指定模块！

    这个错误不知道多少人遇到了,我反正是看到过不少次了.但是一直没有花时间去研究. 今日有空帮群友远程了一下,虽然搞了一会儿,最终还是搞定了,分享一下经验. ​ 问题描述:在执行2号脚本,视频转图片的时候 ...

  2. python MySQLdb 一个连接connection多个cursor

    使用MySQLdb时,如果创建一个连接connection,多个线程同时使用,会不会有问题? 在下文中,我们将模拟这种场景,看是否会出现问题. 1.示例 1.1 正常的情况 创建一个连接,两个线程同时 ...

  3. leetcode 140 单词拆分2 word break II

    单词拆分2,递归+dp, 需要使用递归,同时使用记忆化搜索保存下来结果,c++代码如下 class Solution { public: //定义一个子串和子串拆分(如果有的话)的映射 unorder ...

  4. redhat下配置SEED DVS6446开发环境3

    1.运行arm_v5t_le-gcc,报错为: 64bit的Linux操作系统,无法运行32bit的应用程序 /lib/ld-linux.so.2: bad ELF interpreter: No s ...

  5. WPF图标拾取器

    <Grid x:Name="LayoutRoot"> <Border BorderBrush="> <Border.Effect> & ...

  6. 十八：jinja2之include标签

    用于将页面的某一块地方抽取出来,要嵌入内容的时候使用,继承的概念 把具体内容分别放到其他地方同一管理,要用的时候使用include继承 使用include的时候可以直接使用接收的数据

  7. Java 并发编程：volatile的使用及其原理（二）

    一.volatile的作用 在<Java并发编程:核心理论>一文中,我们已经提到过可见性.有序性及原子性问题,通常情况下我们可以通过Synchronized关键字来解决这些个问题,不过如果 ...

  8. 文件的上传（1）（表单上传和ajax文件异步上传）

    文件的上传(表单上传和ajax文件异步上传) 项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举 ...

  9. 多次NameNode执行format后DataNode启动不了解决方案

    1.问题 执行start-dfs.sh后在进程中查看jps,发现NameNode启动,但DataNode没有 2.原因 在失败的.log文件中看到datanode的clusterID 和 nameno ...

  10. 关于float的小奥秘

    一. float 存储方式 1.1. float 占四个字节 1.2. 浮点数构成 1.2.1. 无论是单精度还是双精度在存储中都分为三个部分: <1>. 符号位(Sign) : 0代表正 ...