我是靠谱客的博主 尊敬哈密瓜,这篇文章主要介绍css3控制旋转方向的属性是什么,现在分享给大家,希望可以做个参考。

本教程操作环境:windows10系统、CSS3&&HTML5版本、Dell G3电脑。

css3控制旋转方向的属性是什么

在CSS3中,可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的变形处理。

浏览器支持

到目前为止:Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上浏览器支持该属性。

2d旋转

使用rotate方法,在参数中加入角度值,角度值后面跟表示角度单位的“deg”文字即可,旋转方向为顺时针方向。

复制代码
1
transform:rotate(45deg);
登录后复制

3D旋转

分别使用rotateX方法、rotateY方法、rotateZ方法使元素围绕X轴、Y轴、Z轴旋转,在参数中加入角度值,角度值后面跟表示角度单位的deg文字即可,旋转方向为顺时针旋转。

复制代码
1
2
3
4
5
transform:rotateX(45deg); transform:rotateY(45deg); transform:rotateZ(45deg); transform:rotateX(45deg) rotateY(45deg) rotateZ(45deg); transform:scale(0.5) rotateY(45deg) rotateZ(45deg);
登录后复制

示例如下:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html> <head> <style> div { margin:30px; width:200px; height:100px; background-color:yellow; /* Rotate div */ transform:rotate(9deg); -ms-transform:rotate(9deg); /* Internet Explorer */ -moz-transform:rotate(9deg); /* Firefox */ -webkit-transform:rotate(9deg); /* Safari 和 Chrome */ -o-transform:rotate(9deg); /* Opera */ } </style> </head> <body> <div>Hello World</div> </body> </html>
登录后复制

输出结果:

888.png

(学习视频分享:css视频教程)

以上就是css3控制旋转方向的属性是什么的详细内容,更多请关注靠谱客其它相关文章!

最后

以上就是尊敬哈密瓜最近收集整理的关于css3控制旋转方向的属性是什么的全部内容,更多相关css3控制旋转方向内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(114)

评论列表共有 0 条评论

立即
投稿
返回
顶部