如何用css制作顺逆时针旋转的效果？

html-css078

如何用css制作顺逆时针旋转的效果？,第1张

1、首先准备一个HTML文档，文档中准备好两个图片，接下来会对这两个图片进行旋转。

2、然后对HTML中的内容定义一些样式，如下图所示，主要是标题以及ul的样式。

3、接下来就给图片所在的li定义宽高，如下图所示。

4、然后给图片设置过渡效果，过渡使用transition属性，如下图所示。

5、当鼠标悬停在图片上时，通过rotate给其设置变形，如下图所示，正数代表的是顺时针，负数代表的是逆时针。

6、最后运行程序，会看到如下图所示的效果，鼠标放在图片上会顺时针或者逆时针旋转。

css3 翻转和旋转的区别如下：

概述：css3中的transform中有旋转，放缩，倾斜，平移的功能，分别对应的属性是：rotate，scale，skew，translate

1、旋转，利用rotate来实现，代码如下：

-webkit-transform:rotate(10deg)指定浏览器内核为webkit的翻转方式

-moz-transform:rotate(10deg)指定firefox浏览器私有属性

transform:rotate(10deg)一般浏览器翻转的角度为10弧度

2、 翻转，利用scale来实现，代码如下：

scale本来是放缩的意思，原来括弧里面（1，1）前者表示X轴，后者表示Y轴，当数字大于1时放大，大于0并小于1时缩小，负数代表翻转

水平翻转：

-webkit-transform:scale(-1，1)水平轴为-1，代表水平翻转

-moz-transform:scale(-1，1)水平轴为-1，代表水平翻转

transform:scale(-1，1)水平轴为-1，代表水平翻转

垂直翻转：

-webkit-transform:scale(1，-1)垂直轴为-1，代表垂直翻转

-moz-transform:scale(1，-1)垂直轴为-1，代表垂直翻转

transform:scale(1，-1)垂直轴为-1，代表垂直翻转

css的旋转属性：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

div{

background:black

width: 150px

height: 150px

}

div:hover{

transform:rotate(45deg)

/*旋转45度*/

transition:1s

/*过渡时间1s*/

}

</style>

</head>

<body>

<div></div>

</body>

</html>