css3 3D效果

css3 3D变形 transfrom初学

这个礼拜学了css3 3d，感觉到css无穷的魅力，可以通过几个特定的代码符号创建出3D效果的页面。
___

透视

一个元素需要一个透视点才能激活3D空间，有两种方法可以得到透视点（视点，焦距）：
1.直接书写perspective
perspective: 600;
2.transfrom书写
transfrom:perspective(600px);
这两种发放都能实现
3.perspective-origin可以实现视角的转换默认为正中心：
好几种设置方式：perspective-origin:center center``perspective-origin:50% 50%还可以设置px；
一个页面想实现3d效果必须加上这一句
transform-style: preserve-3d;才能实现3D效果以上元素缺一不少；
___

transfrom

• transfrom：transform有三种转变方法；
• 旋转（rotate）：rotateX()旋转X轴 rotateY()旋转Y轴 rotateZ()旋转Z轴
• 缩放（scale）大小缩放效果跟2D效果一样
• 移动（transtate）transtate（Z）前后移动。

用css3书写3D效果上面那两部缺一不可；
现在用几个实例来个大家验证一下css3 3D效果，让大家能够更好的理解css3 3D
***

卡牌反转效果

这个案例纯js就能写出来
首先HTML排版

<div class="box">
    <div class="box1 box11"></div>
    <div class="box1 box12"></div>
  </div>

最简单的几个DIV排版
css代码如下

body{
    transform-style:preserve-3d;//创建3d页面
    perspective:500px;
    background:#81b7c1;
}
.box{
  width:200px;
  height:200px;
  margin:50px auto;
  transform-style:preserve-3d;
  position:relative;
  transform:rotateY(0deg);
  transition:transform 0.5s;
}
.box1{
  width:200px;
  height:200px;
  position:absolute;
  line-height:200px;
  font-size:100px;
  text-align:center;
  transform-style:preserve-3d;
  transform:rotateY(0deg);
}
.box:hover{
  transform:rotateY(180deg)
}
.box11{
  background:url(../images/3.jpg) no-repeat;
  background-size:100%;
}
.box12{
  background:url(../images/4.jpg) no-repeat;
  background-size:100%;
  transform:rotateY(180deg);
  backface-visibility: hidden;//隐藏背面
}

上边用到了刚才的transfrom几个属性

立方体

相信这个案例大家对css3 3D的认识更为深切

<div class="cude">
    <div class="box">
      <div class="box1 front"></div>
      <div class="box1 back"></div>
      <div class="box1 left"></div>
      <div class="box1 right"></div>
      <div class="box1 top"></div>
      <div class="box1 bottom"></div>
    </div>
  </div>

css排版

body{
  background-color:rgba(46, 112, 72, 0.63);
}
.cude{
  perspective:500px;
  transform-style:preserve-3d;
}
.box{
  transform-style:preserve-3d;
  width:200px;
  height:200px;
  margin:200px auto;
  position:relative;
  transition:transform 1s;
}
.box:hover{
  transform:rotateX(1800deg) rotateY(360deg);  translateX(100px);
}
.box .box1{
  position:absolute;
  width:200px;
  height:200px;
  line-height:200px;
  font-size:100px;
  text-align:center;
  opacity:1;
}
.box .left{
  background-image:url(../images/1.jpg);
  background-size:100%;
  transform: rotateY(-90deg) translateZ(100px);
}
.box .right{
  background-image:url(../images/2.jpg);
  background-size:100%;
  transform: rotateY(90deg) translateZ(100px);
}
.box .top{
  background-image:url(../images/3.jpg);
  background-size:100%;
  transform: rotateX(90deg) translateZ(100px);
}
.box .bottom{
  background-image:url(../images/4.jpg);
  background-size:100%;
  transform: rotateX(-90deg) translateZ(100px);
}
.box .back{
  background-image:url(../images/5.jpg);
  background-size:100%;
  transform: translateZ(-100px) rotateY(180deg) rotateX(-180deg);
}
.box .front{
  background-image:url(../images/6.jpg);
  background-size:100%;
  transform: translateZ(100px);
}

上边用到了几张图片大家是不是对css3 3D更为深切啦!
最后，学习css3 3D能让大家更好的理解3D效果，增长见识，开拓视野。

• 还没有人评论，欢迎说说您的想法！

相关课程

云知梦-HTML5网页标签

4619 0元 限免

Web前端页面制作快速入门

5495 9.8元

HTML5网页标签

3959 0元 限免