地图 更多

北大青鸟WEB前端培训:CSS3 3D 转换

作者:花老师日期:2019-10-16 09:20浏览131
展开阅读全文

3D 转换

CSS3 允许您使用 3D 转换来对元素进行格式化。

在本章中,您将学到其中的一些 3D 转换方法:

  • rotateX()
  • rotateY()

点击下面的元素,来查看 2D 转换与 3D 转换之间的不同之处:

2D rotate
3D rotate
 

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性          
transform 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
transform-origin
(three-value syntax)
36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
transform-style 36.0
12.0 -webkit-
11.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
perspective 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
perspective-origin 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
backface-visibility 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-

rotateX() 方法

Rotate X

rotateX()方法,围绕其在一个给定度数X轴旋转的元素。

OperaSafariChromeFirefoxInternet Explorer

实例


div { transform: rotateX(120deg); -webkit-transform: rotateX(120deg); /* Safari 与 Chrome */ }
 

rotateY() 方法

 
Rotate Y

rotateY()方法,围绕其在一个给定度数Y轴旋转的元素。

OperaSafariChromeFirefoxInternet Explorer

实例


div { transform: rotateY(130deg); -webkit-transform: rotateY(130deg); /* Safari 与 Chrome */ }
 
 

 

西安北大青鸟,一个让你直达高薪的平台! 
联系电话:13289276245 
学校地址:西安市雁塔区鱼化寨外事学院北校

 

西安市长安区凤栖原地铁站D口对面

 

 

作者:花老师日期:2019-10-16 09:20浏览:131

热点关注

  • 高考如可选学校
  • 高中生学什么好
  • 男生学什么好
  • 女生学什么好
  • 北大青鸟学费多少
  • 北大青鸟怎么样
  • 转行学什么好
  • 大学生学什么好

在线客服

Q Q:2435115494
电话:400-136-0818
作者:花老师浏览131
校区地址:西安市长安区北长安街吉源商厦二楼
版权所有   陕西软键教育科技有限公司  陕ICP备18010377号     电话:400-136-0818 / 029-63631788