CSS3--2D3D的使用

transform 过渡属性向元素进行2D或3D转换

transform-origin：该元素基于某个点来旋转

transform-style: preserve-3d 规定嵌套元素如何在3D空间显示；

perspective :perspective 属性只影响 3D 转换元素,多少像素的3D元素是从视图的perspective属性定义

backface-visibility:属性定义当元素不面向屏幕时是否可见;

2D:对元素移动、缩放、拉伸、拉长和转动；

3D:在三维空间操作，可以改变元素尺寸、形状和位置；

2D方法：

1.translate(x,y) 2D转换，沿着X轴和Y轴平行移动元素

2.translateX(n) 2D转换，沿着X轴平行移动元素

3..translateY(n) 2D转换，沿着Y轴平行移动元素

4.scale(x,y) 2D转缩放转换，改变元素的宽度和高度

5.scaleX(n) 2D转缩放转换，改变元素的宽度

6.scaleY(n) 2D转缩放转换，改变元素的高度

7.rotate(angel) 2D旋转，规定任意角度

8.skew(x-angel,y-angel) 2D倾斜转换，沿着X轴和Y轴

9.skewX() 2D倾斜转换，沿着X轴

10.skewY() 2D倾斜转换，沿着Y轴

3D方法：

1.translate(x,y,z) 3D转换，沿着X轴和Y轴Z轴转换

2.translateX(n) 3D转换，沿着X轴转换

3..translateY(n) 3D转换，沿着Y轴转换

4..translateZ(n) 3D转换，沿着Z轴转换

5.scale(x,y) 3D转缩放转换

6.scaleX(n) 3D转缩放转换，给定X轴的值

7.scaleY(n) 3D转缩放转换，给定Y轴的值

8.scaleZ(n) 3D转缩放转换，给定Z轴的值

9.rotate(angel) 3D旋转，规定任意角度

10.rotateX(angel)沿着X轴3D旋转

11.rotateY(angel) 沿着Y轴3D旋转

12.rotateZ(angel) 沿着Z轴3D旋转

浏览器支持：

2D：

IE10,Firefox,Opera支持，Chrome和Safari需要前缀-webkit-,IE9需要前缀-ms.

3D:

IE10,Firefox，Chrome和Safari需要前缀-webkit-,Opera不支持。

区别：

3D除了增添了少许2D没有的属性外，其他基本上是细化了2D的属性。

转载于:https://www.cnblogs.com/qinlinkun/p/10554637.html

CSS3--2D3D的使用相关推荐

HTML2d动态效果图,html5+css3实现2D-3D动画效果实例
html5+css3实现2D-3D动画效果实例主要实现的功能就是一些2D.3D的动画效果,如平移.缩放.旋转等等. 文章目录 html5+css3实现2D-3D动画效果实例 2D变换 3D变换案例 ...
css3简记(2D3D动画)
目录 1.1 页面装饰 1.2 过渡 1.3 搜索引擎优化 2.1 阿里巴巴矢量图标库 2.2 如果图标库没有项目所需要的图标 3.1 平面转换 3.2 渐变 3.3 空间转换 4.1 动画 4.2 ...
01-移动端开发教程-CSS3新特性（上）
1. 移动端开发课程概述移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...
CSS3 动画专栏：@keyframes与animation的恋曲
目录 0. CSS3的基础模型 1. transform:---()实现元素的自由变换 2. 让我们的元素动起来吧! 2.1 CSS3 @keyframes 规则 2.1.1@keyframes ...
html5+css3实现动画、逐帧动画效果
上篇博文中讲明了html5+css3实现2D-3D动画效果,介绍了html5中2d.3d的运用,顺便简明的提到了动画,而本篇将更加详细的说明动画的各运用及说明. 首先我们需要了解css3中动画的意思, ...
CSS3属性的兼容什么是弹性和布局
CSS3新特性,兼容性,兼容方法总结 css3手册css3手册边框 border-radius 用于添加圆角效果语法: border-radius:[ <length> | <p ...
LCD: 2D-3D匹配算法
LCD: 2D-3D匹配算法标题:LCD:Learned Cross-Domain Descriptors for 2D-3D Matching 作者:Quang-Hieu Pham, Mikael ...
HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
html滑动逐渐覆盖效果,创意jQuery和CSS3滑动覆盖响应式幻灯片特效
这是一款非常有创意的jQuery和CSS3滑动覆盖响应式幻灯片特效.该幻灯片特效采用响应式设计,在幻灯片切换时使用一个滑动块状区域来进行覆盖,显示新的幻灯片内容,整体效果非常不错. 使用方法 HTML ...
css3之transition、transform、animation比较
css3动画多少都有些了解,但是对于transition.transform.animation这几个属性一直是比较模糊的,所以啊,这里做一个总结,也希望大家都可以对此有一个更好地理解. 其实, ...

CSS3--2D3D的使用

CSS3--2D3D的使用相关推荐

最新文章

热门文章