css3学习笔记

以下内容均来自于李炎恢的html5讲义

 

一、变形效果

1、2d平面的变形

CSS3 提供了元素变形效果，也叫做变换。它可以将元素实现旋转、缩放和平移的功能。
属性有两个：transform 和transform-origin。

对于transform 的属性值，具体如下表：

//向水平和垂直各移动200 像素，也可以使用百分比
transform: translate(200px,200px);

//向水平平移200 像素，不加后面的0 也可以

transform: translate(0,200px);

transform: translateY(200px);

//水平、垂直方向放大1.5 倍
transform: scale(1.5);
transform: scale(1.5,1.5);

//水平、垂直方向缩小0.8 倍
transform: scale(0.8,0.8);

//水平方向放大1.5 倍
transform: scaleX(1.5);

//垂直方向放大1.5 倍
transform: scaleY(1.5);

//旋转元素，0 ~ 360 度之间，负值均可
transform: rotate(-45deg);

//倾斜元素，0 ~ 360 度之间，负值均可
transform: skew(45deg, 20deg);

//水平倾斜元素，0 ~ 360 度之间

transform: skewX(45deg);

//垂直倾斜元素，0 ~ 360 度之间，负值均可
transform: skewY(45deg);

//通过六个数值指定矩形，其内部公式计算较为复杂，请百度吧
transform: matrix(1,0,0,1,30,30);

//不同的值可以累计，通过空格分割
transform: rotate(-45deg) scale(1.5);

transform-origin 属性可以设置变换的起点。默认情况下，使用元素的中心作为起点。
具体设置方案参考如下表：

//默认值，以中心点变形
transform-origin: center center;
transform-origin: 50% 50%;

//以左上角为基准点变形
transform-origin: left top;
transform-origin: 0px 0px;

浏览器版本

 

//兼容完整版

-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);

-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-o-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;

 

2、3d平面的变形

由于3D 是立体三维，在x、y 轴的基础上一般会多出一个z 轴，深入跃出轴。以下是
3D 变形的属性值表

3D 变形比2D 变形出来的要晚一些，所以如果需要兼容旧版本浏览器，可以对照这个表。
具体如下：

//兼容版本完整形式

-webkit-transform: translateZ(200px);
-moz-transform: translateZ(200px);
-o-transform: translateZ(200px);
-ms-transform: translateZ(200px);
transform: translateZ(200px);

 

transform-style 属性是指定嵌套元素如何在3D 空间中呈现。

//一般设置到当前元素的父元素
transform-style: preserve-3d;

需要再配合后面的功能属性和变形配置，才能看到效果。同样，这个属性也需要加上各
种厂商前缀。

 

 

perspective 是3D 变形的重要属性，该属性会设置查看者的位置，并将可视内容映射
到一个视锥上，继而投放到一个2D 平面上。

//设置查看者的距离位置，一般设置在元素的父元素上
perspective: 1000px;

需要再配合后面的功能属性和变形配置，才能看到效果。同样，这个属性也需要加上各
种厂商前缀。

 

我们运用前面3D 功能属性transform-style 和perspective 来构建3D 变形效果。

1.translate3d(x,y,z)
//需要3D 位移的HTML 结构，必须有父元素包含
<div id="a">
<img src="img.png" alt="" />
</div>

//CSS 部分，父元素设置3D 呈现且设置透视距离
#a {
perspective: 1000px;
transform-style: preserve-3d;
}
img {
//z 轴可以是负值
transform: translate3d(300px,100px,240px);
}

 

2.translateZ(z)
//可以单独设置z 轴，z 轴可以是负值
img {
transform: translateZ(240px);
}

3.scale3d(x,y,z)
//3D 缩放，单独设置无效，需要配合角度
img {
transform: scale3d(1,1,1.5) rotateX(45deg);
}

 

4.scaleZ(z)
//单独设置z 轴，x 和y 轴默认为1
img {
transform: scaleZ(1.5) rotateX(45deg);
}

 

5.rotate3d(x,y,z,a)
//设置3D 旋转，a 表示角度，xyz 是0 或1 之间的数值
transform: rotate3d(1,0,0,45deg)

6.rotateX(a)、rotateY(a)、rotateZ(a)
//单独设置3D 旋转
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);

 

二 css3过渡效果

过渡效果一般是通过一些简单的CSS 动作触发平滑过渡功能，比如：:hover、:focus、
:active、:checked 等。CSS3 提供了transition 属性来实现这个过渡功能，主要属性如
下表：

 三、css3新增的多列布局

columns

//完整形式
-webkit-columns: 150px 4;
-moz-columns: 150px 4;
columns: border-box;