css3中3d必不可少的perspective属性

理解css3的3d,直接demo

一个骰子的效果(此demo没有perspective,必须加transform-style:perspective-3d;)

perspective的中文意思是:透视,视角!

perspective属性的存在与否决定了你所看到的是2次元的还是3次元的,也就是是2D transform还是3D transform. 这不难理解,没有透视,不成3D.

translateZ帮你寻找透视位置

如果说rotateX/rotateY/rotateZ可以帮助理解三维坐标,则translateZ则可以帮你理解透视位置。

我们都知道近大远小的道理,对于没有rotateX以及rotateY的元素,translateZ的功能就是让元素在自己的眼前或近或远。比方说,我们设置元素perspective为201像素,如下:

perspective: 201px;

则其子元素,设置的translateZ值越小,则子元素大小越小(因为元素远去,我们眼睛看到的就会变小);translateZ值越大,该元素也会越来越大,当translateZ值非常接近201像素,但是不超过201像素的时候(如200像素),该元素的大小就会撑满整个屏幕(如果父辈元素没有类似overflow:hidden的限制的话)。因为这个时候,子元素正好移到了你的眼睛前面,所谓“一叶蔽目,不见泰山”,就是这么回事。当translateZ值再变大,超过201像素的时候,该元素看不见了——这很好理解:我们是看不见眼睛后面的东西的!

perspective属性的两种书写

perspective属性有两种书写形式,一种用在舞台元素上(动画元素们的共同父辈元素);第二种就是用在当前动画元素上,与transform的其他属性写在一起。如下代码示例:


.stage {
    perspective: 600px;
}

以及:


#stage .box {
    transform: perspective(600px) rotateY(45deg);
}

建议Chrome浏览器下访问,可以使用range控件,演示效果更赞,如下截图:-100时候最小,200时候超级满屏(垂直方向因特殊布局限制没有显示),250的时候因为元素已经在视点之外,因此是一片空白(看不见)。

css3中text-overflow:ellipsis;属性超过一行显示省略号

overflow属性-原本是ie浏览器独自开发的属性,由于在css3中被采用,得到了其他浏览器的支持。

指定对于盒内容纳不下的内容显示的方法。

Overflow:hidden 对于超出容纳范围的文字会被隐藏。

Overflow:scroll div元素出现固定的水平滚动条与垂直滚动条

Overflow:auto 当文字超出是根据需要才会出现水平滚动条或者垂直滚动条

Overflow:visible 则显示效果与不使用overflow属性时一样

Overflow-x、Overflow-y可以单独指定水平方向上或者垂直方向上内容超出盒的容纳范围时的显示方法。出现滚动条。

Text-overflow:设置内容在水平方向出现省略号。(white-space:nowrap使得盒右端内容不能换行显示。)

.text{

width:200px;

text-overflow:ellipsis;

-o-text-overflow:ellipsis;

-webkit-text-overflow:ellipsis;

-moz-text-overflow:ellipsis;

white-space:nowrap;

overflow:hidden;

}
<div class="text">文字实例文字实例文字实例文字实例文字实例文字实例文字实例</div>