css3学习总结8--CSS3 3D转换
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转换的更多相关文章
- CSS3中的2D和3D转换知识介绍
一 2D转换 转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.变形.缩放,甚至支持矩阵方式,配合即将学习的过渡和动画知识,可以取代大量之前只能靠Flash才可以实现的效果. 1.移动 ...
- 前端笔记之HTML5&CSS3(下)2D/3D转换&animate动画
一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...
- CSS3学习笔记(3)-CSS3边框
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...
- CSS3动画与2D、3D转换
一.过度动画:transition 五个属性: transition-property css 样式属性名称 transition-duration 动画持续时间(需要单位s) transition- ...
- CSS3学习笔记(1)-CSS3选择器
p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...
- CSS3学习笔记(4)-CSS3函数
p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...
- css3动画2D、3D转换
css3动画的2D.3D转换代码: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- css3 字体、2D转换、3D转换
学习篇之CSS3 字体.2D转换.3D转换 一.字体 @font-face 将字体文件存放到 web 服务器上,通过CSS3 @font-face规则中定义,它会在需要时被自动下载到用户的计算机上. ...
- CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)
CSS3边框: 1.CSS3圆角:border-radius 属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...
随机推荐
- C#二进制文件的读写
sing System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using ...
- a[1000][1000]程序崩溃
1000 * 1000是大于65536的.如果不是需求需要,没必要开辟如此之多的空间.因为这些空间实在栈上申请的(如果是局部变量),栈的空间是有限的并且是宝贵的,所以呢,开辟太多的空间而不适用很可能会 ...
- Putty远程登录VMware虚拟机Linux(Ubuntu)
安装SSH服务 Ubuntu默认并没有安装ssh服务,如果通过ssh链接ubuntu,需要自己手动安装ssh-server.判断是否安装ssh服务,可以通过如下命令进行: www.linuxidc.c ...
- jquery插件实现上下滑动翻页效果
<!DOCTYPE > <meta charset="utf-8" /> <head> <title>测试jquery</ti ...
- ThinkPHP 购物商城网站(数据库中增删改查的功能实现)——————重点——————
控制器 ---------------------GoodsController.class.php------------------------------------------------- ...
- C++对象模型:单继承,多继承,虚继承
什么是对象模型 有两个概念可以解释C++对象模型: 语言中直接支持面向对象程序设计的部分.对于各种支持的底层实现机制. 类中成员分类 数据成员分为静态和非静态,成员函数有静态非静态以及虚函数 clas ...
- 在docker里面安装部署应用
最近一直在做docker的安装打包工作,学到不少东西,在博客里记一下. 环境centos6 ,docker 基础镜象centos6 1.创建本地基础镜象,安装基础命令包 (1)Dockerfile,D ...
- Android软键盘隐藏,遮挡EidtText解决办法
一.自动弹出软键盘 Timer timer=new Timer(); timer.schedule(new TimerTask() { public void run() { InputMethodM ...
- HDU 1878 欧拉回路 图论
解题报告:题目大意,给出一个无向图,判断图中是否存在欧拉回路. 判断一个无向图中是否有欧拉回路有一个充要条件,就是这个图中不存在奇度定点,然后还要判断的就是连通分支数是否为1,即这个图是不是连通的,这 ...
- TCP协议漏洞影响大量Linux设备
导读 本周三在得州奥斯丁举行的 USENIX 安全研讨会上,加州大学河滨分校研究生 Yue Cao 将报告一个严重的TCP协议边信道漏洞(PDF),该漏洞允许攻击者远程劫持任意两主机之间的会话.该漏洞 ...