【CSS】纯CSS3手工打造变形金刚

1
<!-- 外层容器结构可以根据自己的情况来调整 -->
2
<div id="batianhu-wrapper">
3
    <div class="batianhu">
4
        <div class="head-body"></div>
5
        <div class="head-topcover"></div>
6
        <div class="head-toplogo-bg"></div>
7
        <div class="head-toplogo"></div>
8
        <div class="head-toplogo-2"></div>
9
        <div class="head-bottom-left"></div>
10
        <div class="head-bottom-right"></div>
11
        <div class="head-sw-left"></div>
12
        <div class="head-sw-right"></div>
13
        <div class="head-eye"></div>
14
        <div class="head-eye-2"></div>
15
    </div>
16
</div>

1
#batianhu-wrapper {
2
  width: 250px;
3
  height: 325px;
4
  overflow: hidden;
5
  margin: 50px auto 20px auto;
6
}

1
.head-body {
2
  height: 0;
3
  width: 200px;
4
  position: relative;
5
  margin: 25px 0 50px 0;
6
  border-top: 150px solid #555;
7
  border-left: 25px solid transparent;
8
  border-right: 25px solid transparent;
9
  z-index: 2;
10
}

1
.head-topcover {
2
  position: relative; z-index: 5; top: -225px; left: -19px;
3
  border-top: 80px solid #333;
4
  border-left: 60px solid transparent;
5
  border-right: 60px solid transparent;
6
  width: 169px; height: 0;
7
}

1
.head-topcover:after {
2
  content: ""; position: absolute; top: 0px; left: 0px;
3
  border-style: solid;
4
  border-color: #333 transparent transparent transparent;
5
  border-width: 15px 85px 0 85px;
6
  width: 0; height: 0;
7
}

1
.head-toplogo-bg {
2
  position: relative; z-index: 6; top: -267px; left: 67px;
3
  border-top: 110px solid #333;
4
  border-left: 35px solid transparent;
5
  border-right: 35px solid transparent;
6
  width: 46px; height: 0;
7
}

1
.head-toplogo-bg:after {
2
  content: ""; position: absolute; top: 0px; left: 0px;
3
  border-style: solid;
4
  border-color: #333 transparent transparent transparent;
5
  border-width: 30px 23px 0 23px;
6
  width: 0; height: 0;
7
}

1
.head-toplogo {
2
  position: relative; z-index: 7; top: -377px; left: 75px;
3
  border-top: 105px solid #555;
4
  border-left: 30px solid transparent;
5
  border-right: 30px solid transparent;
6
  width: 40px; height: 0;
7
}

1
.head-toplogo:before {
2
  content: ''; display: block;
3
  position: absolute; top: -42px; left: 10px;
4
  border-top: 30px solid #333;
5
  border-left: 10px solid transparent;
6
  border-right: 10px solid transparent;
7
  width: 0; height: 0;
8
}

1
.head-toplogo:after {
2
  content: "";
3
  position: absolute; top: 0px; left: 0px;
4
  border-style: solid;
5
  border-color: #555 transparent transparent transparent;
6
  border-width: 28px 20px 0 20px;
7
  width: 0; height: 0;
8
}

1
.head-toplogo-2 {
2
  position: relative; z-index: 8; top: -482px; left: 75px;
3
  border-top: 37px solid #333;
4
  border-left: 35px solid transparent;
5
  border-right: 35px solid transparent;
6
  width: 30px; height: 0;
7
}

1
.head-bottom-left {
2
  display: block; margin: 50px 0;
3
  position: relative; top: -365px; left: -31px; z-index: 10;
4
  border-right: 107px solid transparent;
5
  border-bottom: 44px solid #555;
6
  border-left: 60px solid transparent;
7
  width: 0px; height: 0px;
8
  color: #555;
9
  -webkit-transform: rotate(236deg);
10
          transform: rotate(236deg);
11
}

1
.head-bottom-right {
2
  display: block;
3
  position: relative; top: -460px; left: 115px;
4
  border-right: 60px solid transparent;
5
  border-bottom: 44px solid #555;
6
  border-left: 107px solid transparent;
7
  width: 0px; height: 0px;
8
  color: #555;
9
  -webkit-transform: rotate(484deg);
10
          transform: rotate(484deg);
11
}

1
.head-sw-left {
2
  position: relative; z-index: 15; left: 45px; top: -629px;
3
  width: 49px; height: 8px;
4
  background: #333;
5
  -webkit-transform: skew(-149deg) rotate(9deg);
6
          transform: skew(-149deg) rotate(9deg);
7
}
8

9
.head-sw-left:after {
10
  content: "";
11
  position: absolute; top: 24px; left: -6px;
12
  width: 53px; height: 8px;
13
  background: #333;
14
  -webkit-transform: skew(-174deg) rotate(1deg);
15
          transform: skew(-174deg) rotate(1deg);
16
}

1
.head-sw-right {
2
  position: relative; z-index: 15; left: 155px; top: -637px;
3
  width: 49px; height: 8px;
4
  background: #333;
5
  -webkit-transform: skew(279deg) rotate(10deg);
6
          transform: skew(279deg) rotate(10deg);
7
}
8

9
.head-sw-right:after {
10
  content: "";
11
  position: absolute; top: -2px; left: 132px;
12
  width: 45px; height: 9px;
13
  background: #333;
14
  -webkit-transform: skew(-212deg) rotate(0deg);
15
          transform: skew(-212deg) rotate(0deg);
16
}

1
.head-eye {
2
  position: relative; z-index: 12; left: 67px; top: -585px;
3
  box-shadow: rgba(255, 255, 255, 0.4) 0 0 15px, rgba(76, 190, 255, 0.95) 0 0 10px;
4
  width: 32px; height: 22px;
5
  background: #4CBEFF;
6
  -webkit-transform: skew(46deg) rotate(14deg);
7
          transform: skew(46deg) rotate(14deg);
8
}
9

10
.head-eye-2 {
11
  position: relative; z-index: 12; left: 150px; top: -607px;
12
  box-shadow: rgba(255, 255, 255, 0.4) 0 0 15px, rgba(76, 190, 255, 0.95) 0 0 10px;
13
  width: 32px; height: 22px;
14
  background: #4CBEFF;
15
  -webkit-transform: skew(-46deg) rotate(-14deg);
16
          transform: skew(-46deg) rotate(-14deg);
17
}