css3 to realize 3D

Veröffentlicht am

long long ago !!!
Today let me have a summary.
transform

1
2
3
4
5
6
7
8
@charset "utf-8"
ul {
        position: relative;
        list-style: none;
        margin-left: 500px;
        -webkit-transform: rotate(-35deg) skew(20deg, 5deg);
        transform: rotate(-35deg) skew(20deg, 5deg);
}

transform变换可以变换三个属性rotate(20deg),skew(20deg),scale(2.0),translate(10px,-10px)分别表示旋转、倾斜、缩放、平移。格式上面的如例子。尝试不同的数字，变换出不同的效果！
transition

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@charset "utf-8"
a{
  display: block;
  background: #000;
  color: #575757;
  text-decoration: none;
  -webkit-transition: all .25s linear;
  transition: all .25s linear;
}
a:hover {
  background: #ff6e42;
  color: #fffcfb;
  -webkit-transform: translate(0.9em, -0.9em);
  transform: translate(0.9em, -0.9em);
}

transition过渡指出需要过渡的变换属性、过渡完成所需的时间、速度效果的速度曲线（linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)）、延迟多少时间开始
::before ::after伪元素
当然还有一些其他伪元素如–:first-line,:first-letter,::selection.和伪类要区分，伪类是设置鼠标移动上去、聚焦上去等的样式（:link,:hover,:active,:visited,:lang,:first-child,:focus,），而伪元素是添加“虚伪的元素”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@charset "utf-8"
a:before{
  content: '';
  position: absolute;
  width: .5em;
  height: 2.5em;
  background: #121212;
  top: .25em;
  left: -.5em;
  -webkit-transform: skewY(-45deg);
  transform: skewY(-45deg);
  -webkit-transition: all .25s linear;
  transition: all .25s linear;
}
a:hover:before {
  background: #b65234;
  width: 1em;
  top: .5em;
  left: -1em;
  -webkit-transition: all .25s linear;
  transition: all .25s linear;
}

HOVER上去，伪元素的变化完成时间在:hover:before里面定义transition.伪元素恢复到原状态所需时间在:before里面定义transition。总括，transition定义的是它里面的动画完成所需时间。参考别人的demo自己码了一个DEMO