css3 3D效果

时间:2023-12-31 22:30:50

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


卡牌反转效果

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效果

相信这个案例大家对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效果,增长见识,开拓视野。