3D转换transform

rotateX() 方法

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

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

rotateY() 方法

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

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

转换属性

下表列出了所有的转换属性:

3D 转换方法

【Demo】CSS3 3D转换的更多相关文章

  1. CSS3 3D转换

    CSS3允许你使用3D转换来对元素进行格式化. 3D转换方法: rotateX() rotateY() 浏览器支持 属性 浏览器支持 transform           IE10和Firefox支 ...

  2. CSS3 3D 转换

    CSS3 允许您使用 3D 转换来对元素进行格式化. 在本章中,您将学到其中的一些 3D 转换方法: rotateX() rotateY() rotateX() 方法 rotateX()方法,围绕其在 ...

  3. CSS3 3D转换——rotateX(),rotateY(),rotateZ()

    CSS3 允许使用 3D 转换来对元素进行格式化. ㈠浏览器支持 Internet Explorer 10 和 Firefox 支持 3D 转换. Chrome 和 Safari 需要前缀 -webk ...

  4. css3 2d转换3d转换以及动画的知识点汇总

    css3 2d转换 2d转换的方法: 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值 ...

  5. HTML CSS3中2D转换、3D转换、过渡效果总结

    一.CSS3 2D转换 通过 CSS3 转换,我们可以对元素进行移动.缩放.转动.拉长或拉伸. 特别注意,我们在使用css3动画效果时,必须给他们加相应的浏览器前缀,以便浏览器识别,让我们更好的去应用 ...

  6. css3 3d特效汇总

    本篇全是实战,没有基础,如果不明白3d特效的原理,可能会看不懂,不过没关系,给你推荐一下 张鑫旭css3 3d转换,或者看我的另一篇博客  css3 2d转换3d转换以及动画的知识点汇总,看完这些3d ...

  7. CSS3 基本属性 浅析(含选择器、背景阴影、3D转换、动画等)

    1渐进增强原则 2私有前缀  不同浏览器在发布不同版本(一般测试版)时会加前缀,新增属性加上前缀进行支持测试:     Chrome浏览器:-webkit-border-radius: 5px;   ...

  8. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  9. CSS笔记(十二)CSS3之2D和3D转换

    参考:http://www.w3school.com.cn/css3/css3_2dtransform.asp 2D Transform 方法 函数 描述 matrix(n,n,n,n,n,n) 定义 ...

随机推荐

  1. 2015-03-22——js常用的Array方法

    Array array.concat(item...);  //产生一个新数组如果item,是一个数组,那么它的每个元素会被分别添加(浅复制,只解析一层).示例:var a = [1, 3, 4];v ...

  2. 用java求一个整数各位数字之和

    /* * 用java求一个整数各位数字之和 */ public class Test02 { public static void main(String[] args) { System.out.p ...

  3. django的项目创建简明流程

    个人理解,不妥之处请指出 创建项目:django-admin startproject user_sys 创建APP:python manage.py startapp auth 测试项目创建是否成功 ...

  4. Linux学习笔记(3)linux服务管理与启停

    一.LINUX 系统服务管理 1.RHEL/OEL 6.X及之前 service命令用于对系统服务进行管理,比如启动(start).停止(stop).重启(restart).查看状态(status)等 ...

  5. Spark 1.5新特性介绍

    一.DataFrame执行后端优化(Tungsten第一阶段) DataFrame可以说是整个Spark项目最核心的部分,在1.5这个开发周期内最大的变化就是Tungsten项目的第一阶段已经完成.主 ...

  6. python全栈开发之OS模块的总结

    OS模块 1. os.name()      获取当前的系统 2.os.getcwd      #获取当前的工作目录 import os cwd=os.getcwd() # dir=os.listdi ...

  7. redhat 9.0安装完不能上网解决办法(补) - 并附上redhat9.0 下载链接

    昨天一位网友Q我,说我的开发环境搭建教程按步骤最后上不了网怎么解决我才突然想起9.0版本在VM7,8中存在问题,于是今天我就简单说下解决的方法. 由于本人习惯使用redhat 9.0版本所以到现在还是 ...

  8. Microsoft.VisualStudio.Web.PageInspector.Loader

    未能加载文件或程序集"Microsoft.VisualStudio.Web.PageInspector.Loader, Version=1.0.0.0, Culture=neutral, P ...

  9. HTML5相册浏览插件

    在线演示 本地下载

  10. new与getInstance

    getInstance 多在单例模式下使用,即一个类只有一个实例,即全局类对象,该对象创建后在内存中保留对他的引用,以便多次调用,每次调用都返回同一个对象. getInstance是少部分类才有的一个 ...