1006次阅读
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元哦!
评论请先登录