<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*如果使用的不是webkit浏览器 请将代码中的注释都去掉就可以看到效果*/
@-webkit-keyframes clockwiseRotate{
to {
transform:rotate(90deg)
}
}
@-webkit-keyframes anticlockwiseRotate{
to {
transform:rotate(-90deg)
}
}
@-webkit-keyframes zoomScale{
to{
transform:scale(1.5)
}
}
.stage{
width:200px
margin:200px auto auto
border-left:1px solid
border-right:1px solid
}
.box{
width:100px
height:100px
transform-origin:0 0
}
.clockwise{
background-color:purple
-webkit-animation:clockwiseRotate 2s infinite
/* 设置旋转中心为左上角 顺时针旋转90度 */
/*transform-origin:0 0
transform:rotate(90deg)*/
}
.anticlockwise{
background-color:orange
-webkit-animation:anticlockwiseRotate 2s infinite
/* 设置旋转中心为左上角 逆时针旋转90度*/
/*transform-origin:0 0
transform:rotate(-90deg)*/
}
.zoom{
background-color:green
-webkit-animation:zoomScale 2s infinite
/* 设置放大中心为元素中心 放大1.5倍*/
transform-origin:50% 50%
/*transform:scale(1.5)*/
}
</style>
</head>
<body>
<div class="stage">
<div class="box clockwise"></div>
<div class="box anticlockwise"></div>
<div class="box zoom"></div>
</div>
</body>
</html>
用CSS可以使边框变圆方法：
工具/原料
Dreamweaver软件
电脑
方法/步骤
1、首先需要打开自己的DW软件，选择文件下面的新建，在弹出框中选择新建一个html页面。
2、进入到新建的html页面后，点击首先做的是将网页进行保存，这样才能在浏览器中进行预览，方便起见，我们保存到桌面上即可。
3、保存之后，我们再回到test.html页面中，敲入一些代码，使得网页可以呈现出一个个的小框。
4、按下键盘上的F12键盘，可以让网页在默认的浏览器中测试显示，可以看到一行的文字，
5、但是文字所在的边框之间并没有明显的间隔，接下来需要为文字之间添加间距。即使用margin-left，更改之后的页面如下图所示。
6、然后再次回到DW软件的编辑页面，在style样式中，添加一句：border-radius:5px
7、之后可以再次进入浏览器中，查看页面更改之后的效果图 。可以看到的，原来的方框已经有了明显的圆弧边框。
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>CSS3旋转图片</title>
<style>
demo {
width: 100px
height: 75px
background-color: yellow
border: 1px solid black
margin:20px
}
#div2 {
transform: rotate(30deg)
-ms-transform: rotate(30deg)/* IE 9 */
-moz-transform: rotate(30deg)/* Firefox */
-webkit-transform: rotate(30deg)/* Safari and Chrome */
-o-transform: rotate(30deg)/* Opera */
}
#div3 {
transform: rotate(90deg)
ms-transform: rotate(90deg)/* IE 9 */
moz-transform: rotate(90deg)/* Firefox */
webkit-transform: rotate(90deg)/* Safari and Chrome */
o-transform: rotate(90deg)/* Opera */
}
</style>
</head>
<body>
<div class="demo" id="div1">你好。这是一个 div 元素。</div>
<div style="clear:both"></div>
<div class="demo" id="div2">你好。这是一个 div 元素。</div>
<div style="clear:both"></div>
<div class="demo" id="div3">你好。这是一个 div 元素。</div>
原图<img src="http://www.baidu.com/img/bd_logo1.png" alt="Flowers" style="width:200px">
90°旋转后的图片
<img src="http://www.baidu.com/img/bd_logo1.png" alt="Flowers" style='width:200pxtransform:rotate(90deg)'>
</body>
</html>
代码呈现的结果如下图：
扩展资料
CSS图片旋转注意事项
1、图片的旋转可以说是一种效果，但是逐渐的，旋转已经不单单是属于视觉效果那个范畴，其更具有使用性，功能性。我们都知道，照片有时候是需要横过来的拍的，当我们预览或共享到web上时需要进行旋转。
2、这个操作在以往可能更多的是交给软件去完成，然后再将旋转到正常角度的图片发布到web上。但是，现在直接就可以在web上对图片进行旋转之类的处理，就算图片处理软件再怎么方便好用，也不及直接发布时对图片做调整来的方便。这就是图片旋转功能的实用意义。我们可以在新浪微博上见到这种图片旋转的功能。
