css3的rotate

原创 2013年12月02日 16:43:32
<!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=utf-8" />
<style>
	div{
		width:100px;
		height:100px;
		background-color:#0FF;
		border:1px solid #F00;
	}
	.div2{
		transform:rotate(40deg);
		-ms-transform:rotate(30deg); /* IE 9 */
		-moz-transform:rotate(40deg); /* Firefox */
		-webkit-transform:rotate(30deg); /* Safari and Chrome */
		-o-transform:rotate(30deg); /* Opera */
		}
</style>
<title>无标题文档</title>
</head>

<body style="margin:100px;">
<div>这个是第一个div</div>
<div class="div2">这个是第二个</div>
</body>
</html>

效果图:


版权声明:原创文章,请标明出处~~~

相关文章推荐

CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

http://www.bbs0101.com/archives/248.html 一.旋转 rotate 用法:transform: rotate(45deg); 共...

CSS3 transform:rotate(deg) 2D旋转效果

index body{ background:url(img/a.jpg);

JS利用CSS3 transform rotate 实现旋转转盘或背景(大转盘抽奖)

最近需要做一个旋转转盘抽奖的小组件,初步考虑之后决定用操作背景元素CSS 中的transform rotate 来做。即控制transform属性不断增加转盘的偏转角度值,来达到转动效果。 使元素围绕...
  • as66t
  • as66t
  • 2013年11月04日 18:03
  • 32598

CSS3中的3D旋转 rotate、3D位移 translate

这里只考虑 chrome 的兼容。 3DrotateDemo.html 3D旋转的Demo #experiment { -we...

css3中rotate的使用,网页图标

http://blog.csdn.net/mmrsdym/article/details/24994681(排序) 测试 /* 看到一道面试题:...
  • wym1581
  • wym1581
  • 2015年04月30日 17:57
  • 363

CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理,本文将对此做详细介绍。 一.旋转 rotate 用法:transform: rot...

CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

一.旋转 rotate 用法:transform: rotate(45deg); 共一个参数“角度”,单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转,上述代码作用是顺时针旋转45...
  • er_ba
  • er_ba
  • 2015年07月26日 00:07
  • 5606

CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理,本文将对此做详细介绍。 一.旋转 rotate 用法:transform: rot...
  • MOONCOM
  • MOONCOM
  • 2017年01月17日 14:26
  • 2560

CSS3 skew倾斜、rotate旋转动画

css3出现之前,我们实现一个对象的一组连续动画需要通过JavaScript或Jquery编写,脚本代码较为复杂; 若需要实现倾斜、旋转之类的动画难度将更高(我还没试过用JavaScript或J...

CSS3图片旋转功能transform:rotate以及Canvas旋转示例

CSS3旋转图片 .demo { width: 100px; height: 75px; backgr...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3的rotate
举报原因:
原因补充:

(最多只允许输入30个字)