Posts match “ css ” tag:

CSS Transfrom 3D

博客头部用了一个3D效果的幻灯片,它的制作其实很简单,主要分为两部分:一是在父元素上做好3D视角视距的准备,二是子元素在3D空间的位置摆放。

前期准备(父元素):
transform-style: flat | preserve-3d

flat表示子元素位于父元素平面内,preserve-3d表示子元素在3维空间内。

perspective: none | length

perspective表示z=0平面与用户之间的距离,0或负值无效。z>0的3D元素会变得更大,z<0的3D元素会变得更小。按需要设置,如果设的过小就好比自身是一只蚂蚁在看一个庞然大物,会有较大的形变,所以一般设的较大,但过大就没有意义了,可以自己按需要调节。我设的是1200px.

perspective-origin: 50% 50%(Initial value)| 百分比|长度|… 

perspective-origin决定了用户视线的焦点,被perspective用作消失点(vanishing point)。

子元素的位置摆放:

开始在做这个幻灯片的时候花了很多时间,因为算转过角度后的元素的x,y值,怎么都摆不好。后来联想到canvas里translate、rotate等移动的都是坐标系恍然大悟。每个元素都有自己的坐标,设值的时候是相对于他自己的坐标系而言的。这样一来我的幻灯片将每个元素转过相应的角度之后只需沿着各自坐标系的Z轴向前移相等的距离(我的是134.5px)。

做好了以上的两步就可以对父元素进行变化了,这里用一个定时器,每隔一段时间将Y轴转动120度,当然还可以配上自己喜欢的animation。

css-实现小图片在大容器中垂直水平居中

19号阿里巴巴的笔试题中有一题是这样的:当图片小于容器时用css实现水平垂直居中,当时特没水准得写了:

img {
    margin: auto auto;
}

单纯的想到使div水平居中可以用

div {
    margin: 0 auto;
}

img是行内元素,设置margin: auto也不起作用。

解决方法(网上查的):

原理:
在非IE的主流浏览器中,设置属性display为table-cell,即可支持垂直居中vertical-align属性。
而针对IE6/7浏览器,设置font-size。因为img和文本可以通过设置img的vertical-align:middle,居中对齐。(原理请参考《HTML权威指南》讲img的章节)因此,设置font-size为容器高度,再通过img的vertical-align属性,即可完成在容器内的垂直居中对齐。

遇到的问题:
字号大小与文本实际高度不同。如例子中设置容器为350×350。font-size:350px的时候,字体实际占用的高度要大于350px。此外同样size的不同的字体占的高度也不同。如果只为了简体中文系统用户,可以选择宋体,因为宋体的文字占用高度与字号完全一致。这里用的是淘宝怿飞的方法,他选用的是Arial字体,这种字体为系统自带字体,可以避免因编码不同带来的问题。根据Arial字体大小大约是其高度的0.873,所以此时容器若为350,则字体设为350*0.873=305px.

适用情况:
图片尺寸小于容器尺寸,需要做水平和垂直居中。事实上当图片大于容器时,容器被撑大到和图片一样大。

以下为效果图:

 

live demo: http://jsfiddle.net/BJRz7/2/