【css3】笔记

浏览数：22 / 时间：2015年06月09日

一、过渡、变形和动画

1. 过渡 transition

应用举例：

a元素normal状态样式为一种，:hover时为另一种，希望由normal转为active时缓慢的变化，这是可以在normal样式中添加transition，如transition: all 1s ease 0s.

属性介绍：

简写是transition: all 1s ease 0s，从前到后属性意义依次是：

transition-property:要过渡的css属性名

transition-duration:完成过渡需要的时间

transition-timing-function:过渡的速度如何变化，比如有ease linear ease-in ease-out ease-in-out cubic-bezier。如果没定义浏览器默认用ease。

transition-delay: 可选。定义过渡开始前的延迟时间

也可以设置不同的css属性有不同的过渡时间，像这样：

transition-property: border, color, text-shadow;

transition-duration: 2s, 3s, 8s;

2. 2d变形 transform

transfrom可以指定元素会做什么样的变形，可用的2d变形有：

transfrom: translate(40px, 10px)

translate是上下左右移动，translate第一个值说的是左右移动值，第二个值是上下移动。上面的例子就是说向右移动40px，向下移动10px。

transform : scale(1.7)

scale可以控制元素放大缩小。scale(1.7)是将元素放大1.7倍大小，scale(0.5)是将元素缩小到0.5倍大小。

transform: rotate(45deg)

rotate是将元素旋转多少度。rotate(45deg)是元素顺时针旋转45度。

transform: skew(10deg, 20deg)

skew是将元素进行斜切。skew(10deg, 20deg)是x轴方向10度斜切，y轴方向20度斜切

transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989)

matrix可以在像素级上完成上面几个属性值完成的效果，具体咋弄不研究了，我不是做设计的。。

transform-origin: 20% 20%

transform-origin可以设置transform时中心点在哪里，不设置默认是以元素的中心为中心点。

3. 3d变形

关于3d变形举一个例子，翻拍效果

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.blue{
background: blue;
}
.pink{
background: pink;
}
.face{
width: 200px;
height: 400px;
}
.container{
-webkit-perspective: 500; /*透视，值越小效果越明显*/
}
.card{
transform-style: preserve-3d; /*3d变化在子元素上保留*/
transition: 10s;
width: 200px;
height: 400px;
}
.container:hover .card{
transform: rotateY(180deg); /*从下往上看顺时针旋转180度*/
}
.face{
position: absolute;
backface-visibility: hidden; /*反转到后面看不见*/
}
.back{
transform: rotateY(180deg); /*这没有transition的过程哦*/
}
</style>
</head>
<body>

<div class="container">
<div class="card">
<div class="face front blue">front</div>
<div class="face back pink">back</div>
</div>
</div>

</body>
</html>

4. 动画

上一个“颤抖吧”的例子

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
@keyframes shake{
0% {
transform: rotate(30deg);
}
50% {
transform: rotate(-50deg);
}
100%{
transform: rotate(20deg);
}
}
@-webkit-keyframes shake{ /*定义动画，名字是shake，不同阶段的css*/
0% {
transform: rotate(30deg);
}
50% {
transform: rotate(-50deg);
}
100%{
transform: rotate(20deg);
}
}
.float{
position: absolute;
top: 200px;
left: 200px;
animation: shake 0.5s infinite ease-in; /*应用动画，shake是动画名，0.5是执行一次动画的事件，infinite是动画执行次数当然也可以设置成5表示执行5次*/
-webkit-animation: shake 0.5s infinite ease-in;
width: 30px;
height: 30px;
background: red;
}
</style>
</head>
<body>
<div class="float"></div>
</body>
</html>