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