html css学习笔记-2d 3d动画的转换
2015-05-16 20:29
471 查看
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <style type="text/css"> div{ width: 100px; height: 100px; background-color: green; } /*移动效果*/ /*.div2{*/ /*x,y移动100*/ /*transform:translate(100px,100px);*/ /*浏览器支持,safrai chrome*/ /*-webkit-transform:translate(100px,200px);*/ /*支持ie 360*/ /*-ms-transform:translate(100px,200px);*/ /*支持opera*/ /*-o-transform:translate(100px,200px);*/ /*支持mozilla firefox*/ /*-moz-transform:translate(100px,200px);*/ /*}*/ /*旋转100*/ /*.div2{*/ /*transform:rotate(100deg);*/ /*浏览器支持,safrai chrome*/ /*-webkit-transform:rotate(100deg);*/ /*支持ie 360*/ /*-ms-transform:rotate(100deg);*/ /*支持opera*/ /*-o-transform:rotate(100deg);*/ /*支持mozilla firefox*/ /*-moz-transform:rotate(100deg);*/ /*}*/ /*缩放 宽度不变,高度变为原来的2倍*/ /*.div2{*/ /*margin-top: 100px;;*/ /*transform:scale(1,2);*/ /*浏览器支持,safrai chrome*/ /*-webkit-transform:scale(1,2);*/ /*支持ie 360*/ /*-ms-transform:scale(1,2);*/ /*支持opera*/ /*-o-transform:scale(1,2);*/ /*支持mozilla firefox*/ /*-moz-transform:scale(1,2);*/ /*}*/ /*顷斜 x,y各50度*/ .div2{ margin-top: 100px;; transform:skew(50deg,50deg); /*浏览器支持,safrai chrome*/ -webkit-transform:skew(50deg,50deg); /*支持ie 360*/ -ms-transform:skew(50deg,50deg); /*支持opera*/ -o-transform:skew(50deg,50deg); /*支持mozilla firefox*/ -moz-transform:skew(50deg,50deg); } .div3{ transform:rotatX(20deg); /*浏览器支持,safrai chrome*/ -webkit-transform:rotatX(20deg); /*支持ie 360*/ -ms-transform:rotatX(20deg); /*支持opera*/ -o-transform:rotatX(20deg); /*支持mozilla firefox*/ -moz-transform:rotatX(20deg); } </style> <title></title> </head> <body> <!-- 2D 3D转换:通过css3转换,我们能够对元素进行移动,缩放,转动,拉长或拉伸 转换是使用元素改变形状,尺寸和位置的一种效果 2D转换方法: translate(); rotate scale skew:倾斜 matrix 3D转换方法: rotateX rotateY --> <div>这是一个初始div</div><br/> <div class="div2">这是改变后的效果</div> <div class="div3"> 这是改变后的效果div3 </div> </body> </html>
相关文章推荐
- CSS3(背景样式,文本立体效果,2d3d转换及动画)第八天
- Unity3D 学习笔记9 —— 3D模型动画控制
- unity3d基础学习笔记9:3d动画控制
- 关于CSS3转换2D,3D过渡与动画方法
- 【Unity 3D】学习笔记十八:游戏贴图与帧动画
- HTML5+CSS3+JS学习笔记-10-CSS3之2D转换的用法
- HTML5的 2D SVG和SVG DOM的学习笔记(2)---SVG动画
- HTML5+CSS3+JS学习笔记-11-CSS3之3D转换的用法
- 【Unity 3D】学习笔记二十:基础2D游戏界面
- Introduction to 3D Game Programming with DirectX 11学习笔记 4.3 计时和动画
- [C#] Direct2D 学习笔记 (一)vb.net转换为c#
- CSS3新标准选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面
- ArcGIS API for JavaScript 4.2学习笔记[8] 2D与3D视图同步
- 【Unity3D】学习笔记(第4记) 2D游戏开发基本技巧之人物动画
- CSS动画-2D、3D转换
- HTML入门学习笔记--CSS 2D转换模块(10)
- 【学习笔记】3D图形核心基础精炼版-1:入门概念
- OpenGL学习笔记(5)3D基本概念
- Direct2D+MFC学习笔记
- 2d 3d 转换的补充