玩命牛的成长记录
登陆
2074次阅读
3D特效

废话不多说，先上个高大上的例子，旋转木马：

html：

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>3D</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
  <div>
    <ul>
      <li><img src="pic1.jpg"/></li>
      <li><img src="pic2.jpg"/></li>
      <li><img src="pic3.jpg"/></li>
      <li><img src="pic4.jpg"/></li>
      <li><img src="pic5.jpg"/></li>
      <li><img src="pic6.jpg"/></li>
      <li><img src="pic7.jpg"/></li>
      <li><img src="pic8.jpg"/></li>
      <li><img src="pic9.jpg"/></li>
    </ul>
  </div>
</body>
check the result

css：

div {
  width : 600px;
  height : 400px;
  margin : 0px auto;
  margin-top : 100px;
  background-color : pink;
  position : relative;
  perspective : 800px;
  -webkit-perspective : 800px;
  -moz-perspective : 800px;
  -o-perspective : 800px;
  -ms-perspective : 800px;
  perspective-origin : top;
  -webkit-perspective-origin : top;
  -moz-perspective-origin : top;
  -o-perspective-origin : top;
  -ms-perspective-origin : top;
}
ul {
  transform-style : preserve-3d;
  -webkit-transform-style : preserve-3d;
  -moz-transform-style : preserve-3d;
  -o-transform-style : preserve-3d;
  -ms-transform-style : preserve-3d;
}
li {
  list-style-type : none;
  position : absolute;
  top : 150px;
  left : 250px;
  animation-duration: 15s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-duration: 15s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-duration: 15s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -o-animation-duration: 15s;
  -o-animation-timing-function: linear;
  -o-animation-iteration-count: infinite;
  -ms-animation-duration: 15s;
  -ms-animation-timing-function: linear;
  -ms-animation-iteration-count: infinite;
}
@keyframes rotate0 {
  0% { transform: rotateY(0deg) translateZ(250px); }
  100% { transform : rotateY(360deg) translateZ(250px); }
}
@keyframes rotate40 {
  0% { transform: rotateY(40deg) translateZ(250px); }
  100% { transform : rotateY(400deg) translateZ(250px); }
}
@keyframes rotate80 {
  0% { transform: rotateY(80deg) translateZ(250px); }
  100% { transform : rotateY(440deg) translateZ(250px); }
}
@keyframes rotate120 {
  0% { transform: rotateY(120deg) translateZ(250px); }
  100% { transform : rotateY(480deg) translateZ(250px); }
}
@keyframes rotate160 {
  0% { transform: rotateY(160deg) translateZ(250px); }
  100% { transform : rotateY(520deg) translateZ(250px); }
}
@keyframes rotate200 {
  0% { transform: rotateY(200deg) translateZ(250px); }
  100% { transform : rotateY(560deg) translateZ(250px); }
}
@keyframes rotate240 {
  0% { transform: rotateY(240deg) translateZ(250px); }
  100% { transform : rotateY(600deg) translateZ(250px); }
}
@keyframes rotate280 {
  0% { transform: rotateY(280deg) translateZ(250px); }
  100% { transform : rotateY(640deg) translateZ(250px); }
}
@keyframes rotate320 {
  0% { transform: rotateY(320deg) translateZ(250px); }
  100% { transform : rotateY(680deg) translateZ(250px); }
}
@-webkit-keyframes rotate0 {
  0% { -webkit-transform: rotateY(0deg) translateZ(250px); }
  100% { -webkit-transform : rotateY(360deg) translateZ(250px); }
}
@-webkit-keyframes rotate40 {
  0% { -webkit-transform: rotateY(40deg) translateZ(250px); }
  100% { -webkit-transform : rotateY(400deg) translateZ(250px); }
}
@-webkit-keyframes rotate80 {
  0% { -webkit-transform: rotateY(80deg) translateZ(250px); }
  100% { -webkit-transform : rotateY(440deg) translateZ(250px); }
}
@-webkit-keyframes rotate120 {
  0% { -webkit-transform: rotateY(120deg) translateZ(250px); }
  100% { -webkit-transform : rotateY(480deg) translateZ(250px); }
}
@-webkit-keyframes rotate160 {
  0% { -webkit-transform: rotateY(160deg) translateZ(250px); }
  100% { -webkit-transform : rotateY(520deg) translateZ(250px); }
}
@-webkit-keyframes rotate200 {
  0% { -webkit-transform: rotateY(200deg) translateZ(250px); }
  100% { -webkit-transform : rotateY(560deg) translateZ(250px); }
}
@-webkit-keyframes rotate240 {
  0% { -webkit-transform: rotateY(240deg) translateZ(250px); }
  100% { -webkit-transform : rotateY(600deg) translateZ(250px); }
}
@-webkit-keyframes rotate280 {
  0% { -webkit-transform: rotateY(280deg) translateZ(250px); }
  100% { -webkit-transform : rotateY(640deg) translateZ(250px); }
}
@-webkit-keyframes rotate320 {
  0% { -webkit-transform: rotateY(320deg) translateZ(250px); }
  100% { -webkit-transform : rotateY(680deg) translateZ(250px); }
}
@-moz-keyframes rotate0 {
  0% { -moz-transform: rotateY(0deg) translateZ(250px); }
  100% { -moz-transform : rotateY(360deg) translateZ(250px); }
}
@-moz-keyframes rotate40 {
  0% { -moz-transform: rotateY(40deg) translateZ(250px); }
  100% { -moz-transform : rotateY(400deg) translateZ(250px); }
}
@-moz-keyframes rotate80 {
  0% { -moz-transform: rotateY(80deg) translateZ(250px); }
  100% { -moz-transform : rotateY(440deg) translateZ(250px); }
}
@-moz-keyframes rotate120 {
  0% { -moz-transform: rotateY(120deg) translateZ(250px); }
  100% { -moz-transform : rotateY(480deg) translateZ(250px); }
}
@-moz-keyframes rotate160 {
  0% { -moz-transform: rotateY(160deg) translateZ(250px); }
  100% { -moz-transform : rotateY(520deg) translateZ(250px); }
}
@-moz-keyframes rotate200 {
  0% { -moz-transform: rotateY(200deg) translateZ(250px); }
  100% { -moz-transform : rotateY(560deg) translateZ(250px); }
}
@-moz-keyframes rotate240 {
  0% { -moz-transform: rotateY(240deg) translateZ(250px); }
  100% { -moz-transform : rotateY(600deg) translateZ(250px); }
}
@-moz-keyframes rotate280 {
  0% { -moz-transform: rotateY(280deg) translateZ(250px); }
  100% { -moz-transform : rotateY(640deg) translateZ(250px); }
}
@-moz-keyframes rotate320 {
  0% { -moz-transform: rotateY(320deg) translateZ(250px); }
  100% { -moz-transform : rotateY(680deg) translateZ(250px); }
}
@-o-keyframes rotate0 {
  0% { -o-transform: rotateY(0deg) translateZ(250px); }
  100% { -o-transform : rotateY(360deg) translateZ(250px); }
}
@-o-keyframes rotate40 {
  0% { -o-transform: rotateY(40deg) translateZ(250px); }
  100% { -o-transform : rotateY(400deg) translateZ(250px); }
}
@-o-keyframes rotate80 {
  0% { -o-transform: rotateY(80deg) translateZ(250px); }
  100% { -o-transform : rotateY(440deg) translateZ(250px); }
}
@-o-keyframes rotate120 {
  0% { -o-transform: rotateY(120deg) translateZ(250px); }
  100% { -o-transform : rotateY(480deg) translateZ(250px); }
}
@-o-keyframes rotate160 {
  0% { -o-transform: rotateY(160deg) translateZ(250px); }
  100% { -o-transform : rotateY(520deg) translateZ(250px); }
}
@-o-keyframes rotate200 {
  0% { -o-transform: rotateY(200deg) translateZ(250px); }
  100% { -o-transform : rotateY(560deg) translateZ(250px); }
}
@-o-keyframes rotate240 {
  0% { -o-transform: rotateY(240deg) translateZ(250px); }
  100% { -o-transform : rotateY(600deg) translateZ(250px); }
}
@-o-keyframes rotate280 {
  0% { -o-transform: rotateY(280deg) translateZ(250px); }
  100% { -o-transform : rotateY(640deg) translateZ(250px); }
}
@-o-keyframes rotate320 {
  0% { -o-transform: rotateY(320deg) translateZ(250px); }
  100% { -o-transform : rotateY(680deg) translateZ(250px); }
}
@-ms-keyframes rotate0 {
  0% { -ms-transform: rotateY(0deg) translateZ(250px); }
  100% { -ms-transform : rotateY(360deg) translateZ(250px); }
}
@-ms-keyframes rotate40 {
  0% { -ms-transform: rotateY(40deg) translateZ(250px); }
  100% { -ms-transform : rotateY(400deg) translateZ(250px); }
}
@-ms-keyframes rotate80 {
  0% { -ms-transform: rotateY(80deg) translateZ(250px); }
  100% { -ms-transform : rotateY(440deg) translateZ(250px); }
}
@-ms-keyframes rotate120 {
  0% { -ms-transform: rotateY(120deg) translateZ(250px); }
  100% { -ms-transform : rotateY(480deg) translateZ(250px); }
}
@-ms-keyframes rotate160 {
  0% { -ms-transform: rotateY(160deg) translateZ(250px); }
  100% { -ms-transform : rotateY(520deg) translateZ(250px); }
}
@-ms-keyframes rotate200 {
  0% { -ms-transform: rotateY(200deg) translateZ(250px); }
  100% { -ms-transform : rotateY(560deg) translateZ(250px); }
}
@-ms-keyframes rotate240 {
  0% { -ms-transform: rotateY(240deg) translateZ(250px); }
  100% { -ms-transform : rotateY(600deg) translateZ(250px); }
}
@-ms-keyframes rotate280 {
  0% { -ms-transform: rotateY(280deg) translateZ(250px); }
  100% { -ms-transform : rotateY(640deg) translateZ(250px); }
}
@-ms-keyframes rotate320 {
  0% { -ms-transform: rotateY(320deg) translateZ(250px); }
  100% { -ms-transform : rotateY(680deg) translateZ(250px); }
}
li:nth-child(1) {
  animation-name: rotate0;
  -webkit-animation-name: rotate0;
  -moz-animation-name: rotate0;
  -o-animation-name: rotate0;
  -ms-animation-name: rotate0;
}
li:nth-child(2) {
  animation-name: rotate40;
  -webkit-animation-name: rotate40;
  -moz-animation-name: rotate40;
  -o-animation-name: rotate40;
  -ms-animation-name: rotate40;
}
li:nth-child(3) {
  animation-name: rotate80;
  -webkit-animation-name: rotate80;
  -moz-animation-name: rotate80;
  -o-animation-name: rotate80;
  -ms-animation-name: rotate80;
}
li:nth-child(4) {
  animation-name: rotate120;
  -webkit-animation-name: rotate120;
  -moz-animation-name: rotate120;
  -o-animation-name: rotate120;
  -ms-animation-name: rotate120;
}
li:nth-child(5) {
  animation-name: rotate160;
  -webkit-animation-name: rotate160;
  -moz-animation-name: rotate160;
  -o-animation-name: rotate160;
  -ms-animation-name: rotate160;
}
li:nth-child(6) {
  animation-name: rotate200;
  -webkit-animation-name: rotate200;
  -moz-animation-name: rotate200;
  -o-animation-name: rotate200;
  -ms-animation-name: rotate200;
}
li:nth-child(7) {
  animation-name: rotate240;
  -webkit-animation-name: rotate240;
  -moz-animation-name: rotate240;
  -o-animation-name: rotate240;
  -ms-animation-name: rotate240;
}
li:nth-child(8) {
  animation-name: rotate280;
  -webkit-animation-name: rotate280;
  -moz-animation-name: rotate280;
  -o-animation-name: rotate280;
  -ms-animation-name: rotate280;
}
li:nth-child(9) {
  animation-name: rotate320;
  -webkit-animation-name: rotate320;
  -moz-animation-name: rotate320;
  -o-animation-name: rotate320;
  -ms-animation-name: rotate320;
}

其实思路很简单，但是有几个点要注意：一、我们在最外层的div上面设置了perspective:800px，这是什么意思呢？意思就是我们的眼睛离屏幕800px，注意，这里是空间哦！然后我们设置了perspective-origin:top;，这是从上往下俯视。二、设置transform-style:preserve-3d;，这个属性要设置在进行变换的li们的父节点上，在这里就是ul，它的意思是以3D的方式来显示。三、transform中的rotateY和translateZ可以指定运动的轴。然后就是简单的旋转和移动了，起始时在一个位置，然后转动不同角度，再向前走一段距离，就形成了一个圈，在结合animation来个动画，就形成了旋转木马了。由于浏览器兼容的问题，代码有点多，但是逻辑并不复杂。360中无法从顶部观看，ie中有时后面会挡住前面，当然了，这些算是浏览器的bug，我们也无能为力。（如果有读者能够解决，欢迎告诉我！）

下面来看看第二个例子，立体翻滚的效果：

html：

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>3D</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
  <div class="wrapper">
    <div class="container">
      <div class="item pink"></div>
      <div class="item blue"></div>
    </div>
  </div>
</body>
check the result

css：

.wrapper {
  width : 300px;
  height : 100px;
  margin : 0px auto;
  margin-top : 100px;
  position : relative;
  perspective : 4000px;
  -webkit-perspective : 4000px;
  -moz-perspective : 4000px;
  -o-perspective : 4000px;
  -ms-perspective : 4000px;
}
.container {
  width : 100%;
  height : 100%;
  position : relative;
  top : 0px;
  transform-style : preserve-3d;
  -webkit-transform-style : preserve-3d;
  -moz-transform-style : preserve-3d;
  -o-transform-style : preserve-3d;
  -ms-transform-style : preserve-3d;
  transition : all 0.2s linear 0s;
  -ms-transition : all 0.2s linear 0s;
  -moz-transition : all 0.2s linear 0s;
  -webkit-transition : all 0.2s linear 0s;
  -o-transition : all 0.2s linear 0s;
}
.item {
  width : 300px;
  height : 100px;
  position : absolute;
  top : 0px;
  left : 0px;
}
.pink {
  background-color : pink;
  transform : translateZ(50px);
  -webkit-transform : translateZ(50px);
  -moz-transform : translateZ(50px);
  -o-transform : translateZ(50px);
  -ms-transform : translateZ(50px);
}
.blue {
  background-color : blue;
  transform : rotateX(-90deg) translateZ(50px);
  -webkit-transform : rotateX(-90deg) translateZ(50px);
  -moz-transform : rotateX(-90deg) translateZ(50px);
  -o-transform : rotateX(-90deg) translateZ(50px);
  -ms-transform : rotateX(-90deg) translateZ(50px);
}
.container:hover {
  transform : rotateX(90deg);
  -webkit-transform : rotateX(90deg);
  -moz-transform : rotateX(90deg);
  -o-transform : rotateX(90deg);
  -ms-transform : rotateX(90deg);
}

初始状态，粉色的div向前走50px，注意，正好是高度的一半，蓝色div向下转，再向前走50px。然后，当hover容器的时候，将容器整体转90度，注意，此时的旋转中心轴正好是立方体的中心，这也是为什么要向前走50px的原因。同样在360和ie中无法正常展示，无奈。

再来看看最后一个例子，立方体：

html：

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>3D</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
  <div class="wrap">
    <div class="cube">
      <div class="front div">前</div>
      <div class="back div">后</div>
      <div class="top div">上</div>
      <div class="bottom div">下</div>
      <div class="left div">左</div>
      <div class="right div">右</div>
    </div>
  </div>
</body>
check the result

css：

.wrap {
  width : 100px;
  height : 100px;
  margin : 0px auto;
  margin-top : 100px;
  position : relative;
  perspective : 4000px;
  -webkit-perspective : 4000px;
  -moz-perspective : 4000px;
  -o-perspective : 4000px;
  -ms-perspective : 4000px;
}
.cube {
  width : 100%;
  height : 100%;
  position : relative;
  top : 0px;
  transform-style : preserve-3d;
  -webkit-transform-style : preserve-3d;
  -moz-transform-style : preserve-3d;
  -o-transform-style : preserve-3d;
  -ms-transform-style : preserve-3d;
  transform: rotateX(-20deg) rotateY(45deg);
  -webkit-transform: rotateX(-20deg) rotateY(45deg);
  -moz-transform: rotateX(-20deg) rotateY(45deg);
  -o-transform: rotateX(-20deg) rotateY(45deg);
  -ms-transform: rotateX(-20deg) rotateY(45deg);
}
.div {
  width : 100%;
  height : 100%;
  position : absolute;
  top : 0px;
  left : 0px;
  text-align : center;
  line-height : 100px;
}
.front {
  transform: translateZ(50px);
  -webkit-transform: translateZ(50px);
  -moz-transform: translateZ(50px);
  -o-transform: translateZ(50px);
  -ms-transform: translateZ(50px);
  background-color : yellow;
}
.back {
  transform: translateZ(-50px);
  -webkit-transform: translateZ(-50px);
  -moz-transform: translateZ(-50px);
  -o-transform: translateZ(-50px);
  -ms-transform: translateZ(-50px);
  background-color : red;
}
.top {
  transform: rotateX(90deg) translateZ(-50px);
  -webkit-transform: rotateX(90deg) translateZ(-50px);
  -moz-transform: rotateX(90deg) translateZ(-50px);
  -o-transform: rotateX(90deg) translateZ(-50px);
  -ms-transform: rotateX(90deg) translateZ(-50px);
  background-color : blue;
}
.bottom {
  transform: rotateX(-90deg) translateZ(-50px);
  -webkit-transform: rotateX(-90deg) translateZ(-50px);
  -moz-transform: rotateX(-90deg) translateZ(-50px);
  -o-transform: rotateX(-90deg) translateZ(-50px);
  -ms-transform: rotateX(-90deg) translateZ(-50px);
  background-color : green;
}
.left {
  transform: rotateY(90deg) translateZ(-50px);
  -webkit-transform: rotateY(90deg) translateZ(-50px);
  -moz-transform: rotateY(90deg) translateZ(-50px);
  -o-transform: rotateY(90deg) translateZ(-50px);
  -ms-transform: rotateY(90deg) translateZ(-50px);
  background-color : white;
}
.right {
  transform: rotateY(-90deg) translateZ(-50px);
  -webkit-transform: rotateY(-90deg) translateZ(-50px);
  -moz-transform: rotateY(-90deg) translateZ(-50px);
  -o-transform: rotateY(-90deg) translateZ(-50px);
  -ms-transform: rotateY(-90deg) translateZ(-50px);
  background-color : black;
}

其实这个对我们来说就相对简单了，只要把6个面旋转和移动到相应的位置，再来个透视就好了。再给容器一个转动角度，就能够看到立体的立方体了。同样在360和ie中无法正常展示，服了。

立体效果能够为网页增色不少，不过在ie和ie内核的360浏览器这里不受待见，所以对于浏览器兼容性要求较高的网站还是慎用吧。

如果您觉得此教程不错，想支持一下，您可以通过支付宝扫码给我们一点，不要超过100元哦！
评论请先登录

联系人：李先生     联系电话：13581641192     电子邮件：channingbreeze@163.com     QQ：396417401     微信号：xin874058

友情链接：欣欣网站制作

Copyright © 2015 calfnote.com All Rights Reserved | 京ICP备15008048号-1