3D 转换

  • 1. rotateX()
  • 2. rotateY()

otateX() 方法

通过 rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转。

示例:

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

  

rotateY() 旋转

通过 rotateY() 方法,元素围绕其 Y 轴以给定的度数进行旋转。

实例

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

  

转换属性

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

属性 描述 CSS
transform 向元素应用 2D 或 3D 转换。 3
transform-origin 允许你改变被转换元素的位置。 3
transform-style 规定被嵌套元素如何在 3D 空间中显示。 3
perspective 规定 3D 元素的透视效果。 3
perspective-origin 规定 3D 元素的底部位置。 3
backface-visibility 定义元素在不面对屏幕时是否可见。 3

css3学习总结8--CSS3 3D转换的更多相关文章

  1. CSS3中的2D和3D转换知识介绍

    一  2D转换 转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.变形.缩放,甚至支持矩阵方式,配合即将学习的过渡和动画知识,可以取代大量之前只能靠Flash才可以实现的效果. 1.移动 ...

  2. 前端笔记之HTML5&CSS3(下)2D/3D转换&animate动画

    一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...

  3. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  4. CSS3动画与2D、3D转换

    一.过度动画:transition 五个属性: transition-property css 样式属性名称 transition-duration 动画持续时间(需要单位s) transition- ...

  5. CSS3学习笔记(1)-CSS3选择器

    p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...

  6. CSS3学习笔记(4)-CSS3函数

    p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...

  7. css3动画2D、3D转换

    css3动画的2D.3D转换代码: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  8. css3 字体、2D转换、3D转换

    学习篇之CSS3 字体.2D转换.3D转换 一.字体 @font-face 将字体文件存放到 web 服务器上,通过CSS3 @font-face规则中定义,它会在需要时被自动下载到用户的计算机上. ...

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

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

随机推荐

  1. C#二进制文件的读写

    sing System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using ...

  2. a[1000][1000]程序崩溃

    1000 * 1000是大于65536的.如果不是需求需要,没必要开辟如此之多的空间.因为这些空间实在栈上申请的(如果是局部变量),栈的空间是有限的并且是宝贵的,所以呢,开辟太多的空间而不适用很可能会 ...

  3. Putty远程登录VMware虚拟机Linux(Ubuntu)

    安装SSH服务 Ubuntu默认并没有安装ssh服务,如果通过ssh链接ubuntu,需要自己手动安装ssh-server.判断是否安装ssh服务,可以通过如下命令进行: www.linuxidc.c ...

  4. jquery插件实现上下滑动翻页效果

    <!DOCTYPE > <meta charset="utf-8" /> <head> <title>测试jquery</ti ...

  5. ThinkPHP 购物商城网站(数据库中增删改查的功能实现)——————重点——————

    控制器 ---------------------GoodsController.class.php------------------------------------------------- ...

  6. C++对象模型:单继承,多继承,虚继承

    什么是对象模型 有两个概念可以解释C++对象模型: 语言中直接支持面向对象程序设计的部分.对于各种支持的底层实现机制. 类中成员分类 数据成员分为静态和非静态,成员函数有静态非静态以及虚函数 clas ...

  7. 在docker里面安装部署应用

    最近一直在做docker的安装打包工作,学到不少东西,在博客里记一下. 环境centos6 ,docker 基础镜象centos6 1.创建本地基础镜象,安装基础命令包 (1)Dockerfile,D ...

  8. Android软键盘隐藏,遮挡EidtText解决办法

    一.自动弹出软键盘 Timer timer=new Timer(); timer.schedule(new TimerTask() { public void run() { InputMethodM ...

  9. HDU 1878 欧拉回路 图论

    解题报告:题目大意,给出一个无向图,判断图中是否存在欧拉回路. 判断一个无向图中是否有欧拉回路有一个充要条件,就是这个图中不存在奇度定点,然后还要判断的就是连通分支数是否为1,即这个图是不是连通的,这 ...

  10. TCP协议漏洞影响大量Linux设备

    导读 本周三在得州奥斯丁举行的 USENIX 安全研讨会上,加州大学河滨分校研究生 Yue Cao 将报告一个严重的TCP协议边信道漏洞(PDF),该漏洞允许攻击者远程劫持任意两主机之间的会话.该漏洞 ...