前端小特效

最新推荐文章于 2024-05-07 03:59:16 发布

javaweb爱好者

最新推荐文章于 2024-05-07 03:59:16 发布

阅读量626

点赞数

分类专栏：前端特效文章标签： HTML5的3D特效 html5 3d 前端

本文链接：https://blog.csdn.net/fangjie1234567/article/details/52503579

版权

前端特效专栏收录该内容

2 篇文章 0 订阅

订阅专栏

3D旋转效果越来越受到企业的重视，在html5里实现3D旋转效果比用动态图片实现3D效果要好得多，毕竟几十行代码总比一张图片要小得多。这里用一个最基本的3D正方体旋转效果给那些不了解HTML53D效果的程序员做个入门。图片大小是100*100。只是一个小技巧，希望对您有所帮助。不要把3D想得太难。3D其实就是把浏览器当做3维空间，并给你先要做的每一个面分别沿x轴，y轴,z轴方向做适当的旋转和位移就行了。

3D.html代码

把六张图片放在六个面，接下来用css将6个面做成正方体代码如下

#wrap{width:100px;height:100px;
border:10px dotted #000;padding:100px;
perspective:800px;perspective-origin:center center;
margin:30px auto;}

#box{
width:100px;height:100px;
position:relative;
transform-style:preserve-3d;
animation:play 30s infinite;
transform-origin:center center -50px;}

#box div{
width:100px;height:100px;
text-align:center;
line-height:100px;
position:absolute;
color:#fff;
z-index:1;
font-size:30px;
backface-visibility:hidden;
}

#box div:nth-of-type(1)
{
left:0px;
top:-100px;
background:yellow;
transform-origin:bottom;
transform:rotateX(90deg);
}
#box div:nth-of-type(2)
{
right:100px;
top:0px;
background:blue;
transform-origin:right;
transform:rotateY(-90deg);
}
#box div:nth-of-type(3)
{
left:0px;
top:0px;
background:red;
z-index:2;
}
#box div:nth-of-type(4)
{
left:100px;
top:0px;
background:green;
transform-origin:left;
transform:rotateY(90deg);
}
#box div:nth-of-type(5)
{
left:0px;
top:100px;
background:purple;
transform-origin:top;
transform:rotateX(-90deg);
}
#box div:nth-of-type(6)
{
left:0px;
top:0px;
background:pink;
transform:translateZ(-100px) rotateY(180deg);
}