css3實現的箱子拆開和封裝效果

admin發表於2017-02-24
CSSS3封裝
程式碼結合一部分jQuery程式碼，但是核心其實就是css3。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  margin: 0;
  padding: 0;
  overflow: visible;
}
body, html {
  width: 100%;
  height: 100%;
  background-color:#fff;
}
.scene {
  width: 800px;
  height: 800px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -270px -400px;
  transform: rotateX(110deg) rotateZ(45deg);
  -webkit-transform: rotateX(110deg) rotateZ(45deg);
  perspective: 800px;
  transform-style: preserve-3d;
}
.box {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -50px;
  transform: translateZ(2px);
  -webkit-transform: translateZ(2px);
  transform-style: preserve-3d;
}
.face {
  width: 100px;
  height: 100px;
  position: absolute;
  transform:rotateX(0deg);
  -webkit-transform:rotateX(0deg);
  transform-style: preserve-3d;
  -webkit-transform-origin: bottom;
  transform-origin: bottom;
}
.content {
  width: 100px;
  height: 100px;
  position: absolute;
  line-height: 100px;
  text-align: center;
  background-color: rgba(0, 0, 255, 0.1);
}
.link{
  width: 100px;
  height: 100px;
  position: absolute;
  left:50%;
  top:50%;
  margin:-50px;
  transform-style: preserve-3d;
}
#bottomFace{
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}  
#leftLink {
  -webkit-transform: rotate(-90deg) translateY(-100px);
  transform: rotate(-90deg) translateY(-100px);
}
#leftFace {
  position:absolute;
  bottom:0;
  left:0;
}
#rightLink {
  transform: rotate(90deg) translateY(-100px);
}
#rightFace {
  position:absolute;
  bottom:0;
  left:0;
}
#frontLink {
  transform: rotate(180deg) translateY(-100px);
}
#frontFace {
  position:absolute;
  bottom:0;
  left:0;
}
#backLink {
  transform: rotate(0deg) translateY(-100px);
}
#backFace {
  position:absolute;
  bottom:0;
  left:0;
}
#topLink {
  transform: rotate(0deg) translateY(-100px);
}
#topFace {
  position:absolute;
  bottom:0;
  left:0;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function () {
  $('input').on('mousemove', function () {
    $('#leftFace,#rightFace,#frontFace,#backFace,#topFace').css({
      'transform': 'rotateX(' + (0 - $(this).val()) + 'deg)',
      '-webkit-transform': 'rotateX(' + (0 - $(this).val()) + 'deg)'
    })
  })
})
</script>
</head>
<body>
<div class="scene">
  <div class="box">
    <div id="bottomFace" class="face">
      <div class="content">底</div>
      <div id="leftLink" class="link">
        <div id="leftFace" class="face">
          <div class="content">左</div>
        </div>
      </div>
      <div id="rightLink" class="link">
        <div id="rightFace" class="face">
          <div class="content">右</div>
          <div id="topLink" class="link">
            <div id="topFace" class="face">
              <div class="content">頂</div>
            </div>
          </div>
        </div>
      </div>
      <div id="frontLink" class="link">
        <div id="frontFace" class="face">
          <div class="content">前</div>
        </div>
      </div>
      <div id="backLink" class="link">
        <div id="backFace" class="face">
          <div class="content">後</div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="ui">
  <input type="range" max="90" min="0" step="1" value="0">
</div>
</body>
</html>

拖動左上角的滑軸可以實現箱子的拆開和封裝效果。

相關文章