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排版
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的认识更为深切

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效果,增长见识,开拓视野。

你可能感兴趣的:(css3 3D效果)