广州web培训
达内广州五羊中心

18087159764

热门课程

达内html5培训:html5代码实现立方体制作

  • 时间:2017-05-28
  • 发布:it
  • 来源:达内软件开发培训

下面广州html5培训小编和大家分享用一个使用html5代码简单实现立方体制作方法,软件开发培训小编觉得这个代码很靠谱啊,我们来看:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

广州html5培训

<title>立方体绘制</title>

<style type="text/css">

*{margin: 0;padding: 0;}

body{

perspective:830px; /*800-1000立体的效果比较好*/

}

#cube{

position: relative; 

width: 300px;

height: 300px;

transform-style: preserve-3d;

margin: 100px auto;

transform-origin: 50% 50% -150.5px;

transition: transform 2s;

}

#cube div{

width: 300px;

height: 300px;

border: 1px solid darkred;

position: absolute;

}

/*top*/

#cube div:nth-child(1){

top: 0;

left: 0;

transform-origin: top;

transform: rotateX(-90deg);

background-color: rgba(255,0,0,0.4);

}

/*front*/

#cube div:nth-child(2){

top: 0;

left: 0;

background-color: rgba(0,255,0,0.2);

}

/*back*/

#cube div:nth-child(3){

top: 0;

left: 0;

transform: translateZ(-302px);

background-color: rgba(0,0,0,0.2);

}

/*left*/

#cube div:nth-child(4){

top: 0;

left: 0;

transform-origin: left;

transform: rotateY(90deg);

background-color: rgba(0,0,255,0.3);

}

/*right*/

#cube div:nth-child(5){

top: 0;

left: 0;

transform-origin: right;

transform: rotateY(-90deg);

background-color: yellow;

opacity: 0.3;

}

/*bottom*/

#cube div:nth-child(6){

top: 0;

left: 0;

transform-origin: bottom;

transform: rotateX(90deg);

background-color: rgba(255,0,205,0.5);

}

#cube:hover{

transform: rotateY(360deg) rotateX(180deg) rotateZ(90deg);

}

</style>

</head>

<body>

<div id="cube">

<div>top</div>

<div>front</div>

<div>back</div>

<div>left</div>

<div>right</div>

<div>bottom</div>

</div>

</body>

</html>这个html5代码代码大家都学会了吗?想要学习it技术吗?广州软件开发培训是个不错的选择!

上一篇:web前端软件开发培训:跨域资源共享与Document.domain
下一篇:端午小长假来达内学前端软件开发培训知识

1分钟搞定Vue核心技术学习

一个职业版权观只为让书和人类相遇

苹果iPhone 8/Plus京东预约人数破百万

广州web培训:苹果取消打赏抽成

选择城市和中心
贵州省

广西省

海南省