CSS3_3D转换
2016-04-10 22:16
761 查看
CSS3_3D转换 [transform]
2D转换是在平面上进行转换,而3D转换是在空间上进行转换。rotateX()方法
控制元素围绕x轴进行旋转。控制一个区域绕x轴旋转120度
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:75px; background-color:yellow; border:1px solid black; } div#div2 { transform:rotateX(120deg); -webkit-transform:rotateX(60deg); /* Safari and Chrome */ -moz-transform:rotateX(120deg); /* Firefox */ } </style> </head> <body> <div>你好。这是一个 div 元素。</div> <div id="div2">你好。这是一个 div 元素。</div> <p><b>注释:</b> Internet Explorer 和 Opera 不支持 rotateX 方法。</p> </body> </html>
rotateY()方法
控制元素围绕y轴进行旋转。控制一个区域绕y轴旋转130度
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:75px; background-color:yellow; border:1px solid black; } div#div2 { transform:rotateY(130deg); -webkit-transform:rotateY(130deg); /* Safari and Chrome */ -moz-transform:rotateY(130deg); /* Firefox */ } </style> </head> <body> <div>你好。这是一个 div 元素。</div> <div id="div2">你好。这是一个 div 元素。</div> <p><b>注释:</b> Internet Explorer 和 Opera 不支持 rotateX 方法。</p> </body> </html>
更多请参考:W3School
相关文章推荐
- CSS3属性教程与案例分享
- CSS3属性教程与案例分享
- CSS3的calc()使用
- 使用CSS3的appearance属性改变元素的外观
- CSS3美化图片
- CSS3质感分析——表面线性渐变
- 分析选项卡底部内凹圆角制作
- 细说百度图片栏目——图片展示效果
- 8个实用的响应式设计框架
- 20+ Animation Scripts, Libraries and Plugins
- 如何使用CSS3画出一个叮当猫
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- jQuery CSS3相结合实现时钟插件
- CSS3实例分享之多重背景的实现(Multiple backgrounds)
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- CSS3中Transition属性详解以及示例分享
- 基于jQuery和CSS3制作响应式水平时间轴附源码下载
- jquery+CSS3模拟Path2.0动画菜单效果代码
- jquery+css3实现会动的小圆圈效果
- 分享33个jQuery与CSS3实现的绚丽鼠标悬停效果