您的位置:首页> 前端教程> CSS3教程
文章导航

CSS3 2D/3D 转换

2019-4-20 22:51| 作者: admin| 查看: 1128| 评论: 2|来自: 蚂蚁部落

transform变换分为2D变换与3D变换。

很容易理解2D变换是在二维空间进行,3D变换则是在三维空间。

建议在阅读完本文后阅读CSS3 transform 属性一章节,了解变换的实质。

一.transform 2D变换:

2D变换比较简单一些,是在一个平面对元素进行的操作。

可以对元素进行水平或者垂直位移、旋转或者拉伸,非常的简单。

首先明确一下CSS中的坐标系,图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/20/225208obyhnzqphq08dwwh.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

对上面坐标系简单分析如下:

(1).默认状态下,x轴是水平的,向右为正。

(2).默认状态下,y轴是垂直的,向下为正,这与传统的数学坐标系不同。

之所以强调是默认状态下,是因为坐标系并不总是横平竖直,这一切可以被改变。

想要了解原因和实现方式可以参阅CSS3 transform 属性一章节。

2D变换涉及到很多属性与函数,本文不会进行介绍,可以参阅如下相关文章:

(1).CSS translate(x)一章节。

(2).CSS scale(x,y)一章节。

(3).CSS rotate()一章节。        

(4).CSS skew()一章节。

(5).CSS transform-origin一章节。

二.transform 3D变换:

3D变换比2D变换多了一个维度,自然也会更为复杂一些。

首先看一个三位空间坐标系示意图:

a:3:{s:3:\"pic\";s:43:\"portal/201904/20/225233x9z21u98j86r096h.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

对上面坐标系简单分析如下:

(1).默认状态下,x轴是水平的,向右为正。

(2).默认状态下,y轴是垂直的,向下为正,这与传统的数学坐标系不同。

(3).默认状态下,z轴是朝向显示屏,且垂直于x与y轴形成的平面。

与前面同样的道理,强调默认状态是因为上面都是可以改变的,参阅CSS3 transform 属性一章节。

3D变换涉及到很多属性与函数,本文不会进行介绍,可以参阅如下相关文章:

(1).CSS translate3d()一章节。

(2).CSS scale3d()一章节。

(3).CSS rotate3d()一章节。

(4).CSS skew()一章节。

(5).CSS perspective(n)一章节。                                

(6).CSS transform-origin一章节。

(7).CSS transform-style一章节。

(8).CSS perspective一章节。

(9).CSS perspective-origin一章节。

(10).CSS backface-visibility一章节。

三.代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" />   
<title>蚂蚁部落</title>   
<style> 
#box{ 
  height:100px; 
  width:150px; 
  padding:10px; 
  border:1px solid black; 
  perspective:500px; 
} 
#box > div{ 
  width:100px; 
  height:100px; 
  text-align:center; 
  line-height:100px; 
  font-size:12px; 
  border:1px solid black; 
  background-color:yellow; 
  transform:rotateX(40deg);   
} 
</style> 
</head> 
<body> 
<div id="box"> 
  <div>蚂蚁部落</div> 
</div>    
</body>   
</html>

上面是一个简单的3D转换效果,代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/20/225308qye8s2wy5yylxwuj.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

简单对上述代码分析如下:

(1).rotateX(40deg)设置黄色元素在x轴上旋转40deg,很明显是3D旋转。

(2).但是如果想要这个旋转在视觉上有3D效果,必须在其父元素上设置perspective属性。

上面代码极为简单,目的是让读者对变化有一个基本的感受,变换中用到的属性或者方法可以参阅对应的文章。

如果对本文有任何的建议或者意见,可以在文章底部留言,本站会第一时间回复,感谢对蚂蚁部落的支持。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

发表评论

最新评论

引用 admin 2019-11-27 18:15
肥鱼: 2D的应该是向右为正吧
确实笔误了,非常感谢指正,已经修复
引用 肥鱼 2019-6-4 09:34
2D的应该是向右为正吧

查看全部评论(2)

返回顶部