开发者学堂课程【HTML5 新特性学习:3D 效果】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/396/detail/5057
3D 效果
CSS3 允许您使用3D 转换来对元素进行格式化
浏览器支持:
Internet Explorer 10、 Firefox 以及 Opera 支持 transform 属性
Chrome 和 Safari 需要前缀-webkit-
Internet Explorer 9需要前缀-ms-
属性:
rotateX()
rotateY()
代码如下
<!DoCTYPE htnl>
<html langm" "en>
<head>
cweta charset-"utF-8">
<titlex</title>
cstylex
div{
width:200pxi
height:75px;
background-color: yellow;
bordor: lpx solid black:
》
/*.div1{*/
/transrorn; rotateX(12deg);*/
/--webkit-transform: rotatex(lzedeg);/ /*}*/
.divl{
transtorn: rotateY(1z0deg);
-webkit-trapsforn: rotateY(12odeg);
}
</style>
</head
<body>
<div class" divl>
Hello,欢迎您观看由尚学堂为您提供的视频
</div>
</body>
</htmls