3D效果|学习笔记

简介: 快速学习3D效果

发者学堂课程【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

相关文章
|
Kubernetes Cloud Native Linux
K8S 初识_K8S 初识 | 学习笔记
快速学习 K8S 初识_K8S 初识
104 0
K8S 初识_K8S 初识 | 学习笔记
|
存储 消息中间件 弹性计算
尘央大佬带你学| 学习笔记
快速学习尘央大佬带你学。
134 0
尘央大佬带你学| 学习笔记
|
设计模式 XML 前端开发
回顾 | 学习笔记
快速学习回顾,介绍了回顾系统机制, 以及在实际应用过程中如何使用。
82 0
回顾 | 学习笔记
|
开发者 索引
Aggregations|学习笔记
快速学习 Aggregations。
258 0
Aggregations|学习笔记
|
开发者 Python
In 和 not in 的使用 | 学习笔记
快速学习 In 和 not in 的使用
111 0
|
存储 SQL 分布式计算
MaxCamputeInfomationSchema 详解 | 学习笔记
快速学习 MaxCamputeInfomationSchema 详解
209 0
MaxCamputeInfomationSchema  详解 |  学习笔记
|
Java 开发者
接口标准|学习笔记
快速学习接口标准
接口标准|学习笔记
|
Java 程序员 开发者
投票选举|学习笔记
快速学习投票选举
111 0
投票选举|学习笔记
学习笔记
学习笔记,各个方面
130 0
2018-10-05学习笔记
Material Design Material Design 实战 之第四弹 —— 卡片布局以及灵动的标题栏(CardView & AppBarLayout) Material Design 实战 之第五弹 —— 下拉刷新(SwipeRefresh...
696 0