ｃ３总结(续)

css3总结(续)

c3 2d转换

本章有几种2d变换方法

translate()方法

根据左和顶部(x和y轴)位置给定的参数,从当前元素位置移动.

语法

transform:translate(50px,100px);

也可以这样写

transform:translateX(50px);
transform:translateY(100px);

函数中前一个参数为x轴移动的距离,后面参数为y轴移动的距离,在html中的坐标轴是以元素的左上角为原点,向右为x轴正方向,向下为y轴正方向

代码

div#div2{
	transform:translate(5px,100px);
}

rotate()方法

本函数接受参数为角度,向顺时针方向旋转向应的角度,旋转中心为元素的中心(可以为负值,负值逆时针旋转)

语法

transform:rotate( xx deg);

代码

div{
	width:100px;
	height:75px;
	background-color:red;
	border:1px solid black;
}
div#div2{
	transfor:rotate(30deg);
}

scale()方法

可以控制元素增加或减少的大小
语法如下

transform:scale(x轴的变化倍数,y轴的变化倍数);

或者

scaleX(n)
scaleY(n)

代码

div {
    margin: 150px;
    width: 200px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
}
div#div2{
	transform: scale(2,3);	
}

skew()方法

控制xy轴的倾斜角度,第二个参数可以为空,意为不倾斜,默认向顺时针方向倾斜,负值表示向逆时针
语法如下

transform:skew(xdeg,ydeg);

也可以

transform:skewX(xdeg);
transform:skewY(ydeg);

代码

div
{
	width:100px;
	height:75px;
	background-color:red;
	border:1px solid black;
}
div#div2
{
	transform:skew(30deg,20deg);
}

可以看到元素的边进行了旋转

matrix() 方法

语法

transform:matrix(a,b,c,d,e,f);

其中的e为x轴的平移距离,f为y轴的平移距离
a对应x轴缩放,b对应y轴
还有旋转
语法如下

transform：matrix（cosθ，-sinθ,sinθ,cosθ,0,0)

计算出响应的三角函数值就能写进去了

c3 3d转换

rotateX()&rotateY()&rotateZ()

与前面rotate()的区别是前面的是2d旋转,这俩函数是控制元素在坐标轴上的旋转

div
{
	width:100px;
	height:75px;
	background-color:red;
	border:1px solid black;
}
div#div2
{
	transform:rotateX(120deg);
}

div
{
	width:100px;
	height:75px;
	background-color:red;
	border:1px solid black;
}
div#div2
{
	transform:rotateY(130deg);
}

还有一种集合写法
rotate3d(x,y,z,angle)

以transform-origin的设定(0,0,0)为原点,(x,y,z)为终点的向量为轴旋转angle角度

scale3d() & scaleX() & scaleY() & scaleZ()

这个就很清晰了,就是xyz轴上的元素缩放大小

c3过渡效果

这就是一个神器了,不用js就能做出渐变效果
语法

transition: 元素要过渡变化的参数 变化持续时间 变化方式;

最后一个参数着重介绍一下

• linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
• ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
• ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
• ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
• ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
• cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

不填的话默认为ease,但是建议写上ease

代码

div {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s, height 2s, transform 2s;
}

div:hover {
    width: 200px;
    height: 200px;
    transform: rotate(180deg);
}

把transition写在div原本的选择器之下,就可以在触发某个条件的时候进行渐变改变,如代码,中间只要用逗号隔开就能同时对多个属性的过渡进行控制
emmmmm…gif截取突然罢工了…上不了图…

CSS3 @keyframes 规则

使用本规则可以制作动画,但是要和动画选择器进行绑定.

代码如下

div
{
    animation: myanimation 5s;
}

使用animation,规定动画的名字和时长

接着

@keyframes myanimation
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

其中的百分比为时长百分比,意为在开始时元素为红,在25%时间时为黄色,以此类推

c3用户界面

resize属性指定一个元素是否由用户去调整大小.

div{
	resize: both;
	overflow: auto;
}

拖动右下角的三角标识符就嗯改变元素的大小

边框大小调整box-sizing

有三种属性

• border-box盒子的高度宽度计算包括边框
• content-box 盒子的高度宽度计算不包括边框,排版出错有可能就是这个原因
• inherit 从父元素继承box-sizing属性

这个就不上图了

c3外形修饰

outline-offset属性
对轮廓进行偏移,并在超出边框边缘进行轮廓
绘制

轮廓的特点

• 轮廓不占用空间
• 轮廓可以是非矩形

代码

div
{
    margin:20px;
	width:150px; 
	padding:10px;
	height:70px;
	border:2px solid black;
	outline:2px solid red;
	outline-offset:15px;
}