html5,css3精致范例...

小草范文网发布于：2016-10-13 分类：范例手机版

篇一：40个超赞的国外经典的HTML5实例教程

40个超赞的国外经典的HTML5实例教程

想索取更多相关资料请加qq：649085085或登录

PS;本文档由北大青鸟广安门收集自互联网，仅作分享之用。

在这个教程列表上我们为您收集了最具有代表性的各类型HTML5免费教程，它们会帮助你更好的利用html5来优化完善你的web项目，而且让人惊喜的是HTML5的一些热门特性都在这些案例里面体现出来了，相信这些前沿的交互细节会为你的项目锦上添花!教程都很详细，您可以按着它们的详细指南一步步制作，来挑选你的法宝吧。

Making a Beautiful HTML5 Portfolio

Create offline Web applications on mobile devices with HTML5

Growing Thumbnails Portfolio

HTML5 Unleashed: Tips, Tricks and Techniques

Create a Stylish Contact Form with HTML5 & CSS3

Create Vector Masks using the HTML5 Canvas

HTML5 File Uploads with jQuery

Create a Grid Based Web Design in HTML5 & CSS3

Designing a Blog with HTML5

How to Build Cross-Browser HTML5 Forms

篇二：HTML5 CSS3 专题：诱人的实例 3D展示商品信息

/retype/zoom/e94d513b58f5f61fb63666a1?pn=1&x=0&y=1541&raww=893&rawh=395&o=png_6_0_0_0_0_0_0_892.979_1262.879&type=pic&aimh=212.31802911534155&md5sum=409eb748b0b7d9ae6ebea601aacc28c6&sign=adbec5112e&zoom=&png=0-46506&jpg=0-0" target="_blank">点此查看

强化下perspective和transform:translateZ的用法。传统的商品展示或许并不能很好的吸引用户的注意力，但是如果在展示中添加适当的3D元素，~说不定效果不错哈~ 效果图：

说明一下：这个创意不是我想的，哈~模仿别人的，创意应该是w3cplus上的。当然了，重点是教大家如何做，就当高仿了~

首先，先教大家利用CSS3制作一个正方体：

在木有CSS前，这样的立方体，应该很难制作吧~嗯，我觉得很难~

/retype/zoom/e94d513b58f5f61fb63666a1?pn=2&x=0&y=1018&raww=893&rawh=14&o=png_6_0_0_0_0_0_0_892.979_1262.879&type=pic&aimh=7.525195968645017&md5sum=409eb748b0b7d9ae6ebea601aacc28c6&sign=adbec5112e&zoom=&png=46507-53910&jpg=0-22951" target="_blank">点此查看

1. <body>

4. <div class="wapper">

5. <div class="cube">

6.<div class="side front">1</div>

7.<div class="sideback">6</div>

8.<div class="side right">4</div>

9.<div class="sideleft">3</div>

10.<div class="side top">5</div>

11.<div class="side bottom">2</div>

12. </div>

13. </div>

14.

15. </body>

wapper为此效果的舞台，即设置perspective的元素，如果多个元素共享一个舞台，那么从一个视线观察所以的元素的效果是不一样的，就相当我们正常情况下，站在一排倾斜成45度的门前面，每个门对于我们视线来说，角度是不同的；div#cube代表一个立方体，然后6个DIV分别代表每个面。

div#cube设置transform-style:preserve-3d，然后每个元素设置rotate和translateZ 现在所有的面重叠在同一个平面上，我们分别让：

font往前即Z轴方向移动半个边长（translateZ(50px)）的距离即50px；

back先绕Y轴旋转180度，这样让字体是对外的，然后translateZ(50px)，因为此时已经旋转了180度，所以tanslateZ是向下的，

同理，其他面分别绕X轴或者Y轴旋转90度，然后translateZ(50px)

/retype/zoom/e94d513b58f5f61fb63666a1?pn=3&x=0&y=1112&raww=893&rawh=14&o=png_6_0_0_0_0_0_0_892.979_1262.879&type=pic&aimh=7.525195968645017&md5sum=409eb748b0b7d9ae6ebea601aacc28c6&sign=adbec5112e&zoom=&png=53911-61706&jpg=22952-76150" target="_blank">点此查看

1. .wapper

2. {

3.margin: 100px auto 0;

4.width: 100px;

5.height: 100px;

6.-webkit-perspective: 1200px;

7.font-size: 50px;

8.font-weight: bold;

9.color: #fff;

10. }

11.

12. .cube

13. {

14.

15.position: relative;

16.width: 100px;

17.-webkit-tr(原文来自：wWw.xiaOcAofANweN.coM 小草范文网:html5,css3精致范例...)ansform: rotateX(-40deg) rotateY(32deg);

18.-webkit-transform-style: preserve-3d;

19. }

20.

21. .side

22. {

23.text-align: center;

24.line-height: 100px;

25.width: 100px;

26.height: 100px;

27.background: rgba(255, 99, 71, 0.6);

28.border: 1px solid rgba(0, 0, 0, 0.5);

29.position: absolute;

30. }

31.

32. .front

33. {

34.-webkit-transform: translateZ(50px);

35. }

36.

37. .top

38. {

39.-webkit-transform: rotateX(90deg) translateZ(50px);

/retype/zoom/e94d513b58f5f61fb63666a1?pn=4&x=0&y=1057&raww=893&rawh=14&o=png_6_0_0_0_0_0_0_892.979_1262.879&type=pic&aimh=7.525195968645017&md5sum=409eb748b0b7d9ae6ebea601aacc28c6&sign=adbec5112e&zoom=&png=61707-69284&jpg=76151-88004" target="_blank">点此查看

57. .back

58. {

59.-webkit-transform: rotateY(-180deg) translateZ(50px);

60. }

对于显示效果，可以调节perspective的距离~

好了，立方体理解了，那么这个商品展示就没什么难度了；两个DIV分别代表两个面，一个是图片，一个是介绍，初始时，介绍绕X轴先旋转90deg，然后当鼠标移动时，将整个盒子绕x轴旋转90deg即可。

HTML:

<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <link href="css/reset.css" rel="stylesheet" type="text/css">

http://

9. </head>

10. <body>

11.

12.

13. <ul id="content">

14.

15. <li>

16.<div class="wrapper">

17. <img src="images/a.png">

18. <span class="information">

19.<strong>Contact Form</strong> The easiest way to add a contact

form to your shop.

20. </span>

21.</div>

22. </li>

23.

24. <li>

25.<div class="wrapper">

26. <img src="images/b.jpeg">

27. <span class="information">

28.<strong>Contact Form</strong> The easiest way to add a contact

form to your shop.

29. </span>

30.</div>

31.

32. </li>

33.

34. <li>

35.<div class="wrapper">

36. <img src="images/c.png">

37. <span class="information">

38.<strong>Contact Form</strong> The easiest way to add a contact

form to your shop.

39. </span>

40.</div>

41.

42. </li>

43.

44. </ul>

45.

46.

47. </body>

48. </html>

篇三：html5css3的正方体3D效果简单案例

<!DOCTYPE html>

<head>

<title>正方体展开到旋转</title>

<style>

*{ padding: 0 ; margin: 0;}

img{ border: 0;}

#view{ perspective:500px;}

@keyframes scroll{100%{ transform:rotate3d(1,1,1,360deg);}}#cube{ position: relative; width: 200px; height: 200px; margin: 200px auto; perspective-origin:250px -50px;animation:scroll 2s linear 7s infinite; transform-style:preserve-3d;}

.item{ width: 200px; height: 200px; position: absolute; opacity: 0.85;text-align: center; background: rgb(0, 148, 255); font-size: 30px; font-weight: bold; color: #000; line-height: 200px; }

@keyframes item1{ 100%{ transform:rotateY(-90deg);}}

#item1{ z-index: 6; transform-origin:left; animation:item1 1s linear 1s both;}

@keyframes item2{ 100%{ transform:rotateY(90deg);}}

#item2{ z-index: 5;transform-origin:right; animation:item2 1s linear 2s both;}@keyframes item3{ 100%{ transform:rotateX(90deg);}}

#item3{ z-index: 4;transform-origin:top; animation:item3 1s linear 3s both;}@keyframes item4{ 100%{ transform:rotateX(-90deg);}}

#item4{ z-index: 3;transform-origin:bottom; animation:item4 1s linear 4s both;}@keyframes item5{ 100%{ transform:translateZ(200px);}}

#item5{ z-index: 2; animation:item5 1s linear 5s both; }

@keyframes item6{ 100%{ transform:rotateY(180deg);}}

#item6{ z-index: 1; animation:item6 1s linear 6s both;}

</style>

</head>

<body>

</div>

</body>

</html>

本文已影响人

上一篇：广州美术学院色彩教学作品范例 下一篇：老人传记范例

html5,css3精致范例...

html5,css3精致范例...

热点范例

最新范例