Html5 和 CSS的简单应用-优快云博客

本文通过多个实例展示CSS3的2D和3D变换效果，包括菱形链接菜单、三维正方体、一扇打开的门及明星照片墙，深入讲解transform属性的使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文是利用几个简单的小例子，来实现html css的简单应用。

菱形链接菜单

本例是采用html5 css3.0设置的菜单链接。其中主要用到了以下几个方面：

CSS3.0中的2D变换，如：旋转transform:rotate(45deg);移动，放大transform:rotate(-45deg) scale(1.2,1.2) translate(10px,0px);/*鼠标放上去后，放大,移动*/等功能。
用到了margin:25px;/*margin表示元素与其他元素之间的空白*/。
超链接标签a中垂直居中的设置：设置height 和line-height属性
鼠标放上去的样式

具体代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>CSS 3.0设置菱形div</title>
 5     <style type="text/css"> 
 6         .menu
 7         {
 8              border-bottom:1px solid black;
 9             
10             }
11     .menu div
12     { 
13         width:100px;
14         height:100px;
15         text-align:center;
16         margin:25px;/*margin表示元素与其他元素之间的空白*/
17         float:left;
18         border:1px solid black;
19         transform:rotate(45deg);/*rotate表示旋转45°*/
20      }
21      .m1
22      {
23          background-color:Red;
24       }
25      .m2
26      {
27          background-color:Blue;
28       }
29       .m3
30      {
31          background-color:Green;
32       }
33       .m4
34      {
35          background-color:Yellow;
36       }
37       .m5
38      {
39          background-color:Gray;
40       }
41       .m6
42      {
43          background-color:Olive;
44       }
45       .m7
46      {
47          background-color:Orange;
48       }
49      .menu a
50      {
51          text-decoration:none;/*不显示下划线*/
52          width:70px;
53          height:70px;
54          margin:15px;
55          display:block;
56          color:Black;
57          text-align:center;
58          line-height:70px;
59          transform:rotate(-45deg);/*因为外层Div进行旋转，所以a标签也会旋转，所以需要逆向旋转回来*/
60       }
61       
62       .menu a:hover
63       {
64           transform:rotate(-45deg) scale(1.2,1.2) translate(10px,0px);/*鼠标放上去后，放大,移动*/
65       }
66     </style>
67 </head>
68 <body>
69 <header>
70     <h1>这是一个CSS3.0的示例</h1>
71     <div class="menu">
72         <div class="m1"><a href="#">基础语言</a></div>
73         <div class="m2"><a href="#">前端开发</a></div>
74         <div class="m3"><a href="#">移动开发</a></div>
75         <div class="m4"><a href="#">数据处理</a></div>
76         <div class="m5"><a href="#">互联网</a></div>
77         <div class="m6"><a href="#">IT硬件</a></div>
78         <div class="m7"><span><a href="#">其他</a></span></div>
79     </div>
80     
81 </header>
82 <div style="clear:left;border-top:1px solid black;"></div>
83 <div style=" margin-top:2px; border-top:1px solid black;">ada </div>
84 </body>
85 </html>

View Code

三维正方体

本例是采用div css实现三维正方体，主要涉及到以下几个知识点：

transform-style: preserve-3d; 以3D的方式显示被镶嵌的元素。
transform: rotateX(30deg) rotateY(30deg);对元素应用旋转变换。
position: relative; 元素的定位。

如下图所示：

具体代码如下：

 1 .wrap {
 2     width: 200px;
 3     height: 200px;
 4     margin: 200px auto;
 5     position: relative;
 6     transform-style: preserve-3d;
 7     transform: rotateX(30deg) rotateY(30deg);
 8 }
 9 
10 .wrap div {
11     width: 200px;
12     height: 200px;
13     position: absolute;
14     border: 1px solid blue;
15     text-align: center;
16     line-height: 200px;
17     font-size: 15px;
18 }
19 
20 #top {
21     transform: rotateX(90deg) translateZ(100px);
22 }
23 
24 #bottom {
25     transform: rotateX(90deg) translateZ(-100px);
26     border-left: dashed;
27 }
28 
29 #before {
30     transform: translateZ(100px);
31     border-bottom: dashed;
32     border-left: dashed;
33 }
34 
35 #after {
36     transform: translateZ(-100px);
37 }
38 
39 #left {
40     transform: rotateY(-90deg) translateZ(100px);
41 }
42 
43 #right {
44     transform: rotateY(90deg) translateZ(100px);
45     
46 }

View Code

一扇打开的门

本例是实现一扇打开的门，涉及的知识点如下：

transform-style: preserve-3d; 以3D的方式显示被镶嵌的元素。
transform: rotateX(30deg) rotateY(30deg);对元素应用旋转变换。
position: relative; 元素的定位。
border-radius: 20px;定义元素的角的弧度半径。

效果图如下：

具体代码如下：

 1 #door{
 2     width:200px;
 3     height: 200px;
 4     margin: 200px auto;
 5     /*border: 1px solid black;*/
 6     position: relative;
 7     transform-style: preserve-3d;
 8 }
 9 #door div{
10     width:200px;
11     height: 200px;
12     border: 1px solid black;
13     position: absolute;
14     text-align: center;
15 }
16 
17 #left{
18     transform:rotateX(45deg) rotateY(-45deg) translateX(-200px) translateY(-70px) scaleY(1.4);
19 }
20 
21 #middle{
22     transform:rotateY(45deg) ;
23     background-color: greenyellow;
24 }
25 
26 #right{
27     transform:rotateX(45deg) rotateY(45deg) translateX(200px) translateY(-70px)  scaleY(1.4);
28 }
29 
30 #door #left1{
31     width:101px;
32     height: 200px;
33     border:0px;
34     position:absolute;
35     margin-left: 0px;
36     padding: 0px;
37     background-color: darkred;
38     
39 }
40 #door #left2{
41     width:100px;
42     height: 200px;
43     border:0px;
44     position:absolute;
45     margin-left: 100px;
46     padding: 0px;
47     background-color: darkred;
48 }
49 
50 #door .ball{
51     width:20px;
52     height: 20px;
53     border-radius: 20px;
54     background-color: gold;
55     margin-top: 10px;
56     margin-left: 50px;
57     position:relative;
58 }

View Code

明星照片墙

本例是实现一款自由的明星照片墙，涉及到的知识点如下：

position:absolute; 绝对定位。
transform: scale(1.2); 缩放，大于0：放大，小于0：缩小。
transform: rotate(-30deg); 旋转，二维空间旋转。

效果图如下：

具体代码如下：

 1 #star{
 2     width:800px;
 3     height: 800px;
 4     background-image: url(../img/bg.jpg);
 5     background-repeat: repeat;
 6 }
 7 
 8 #star div{
 9     width:180px;
10     height: 180px;
11     border: 1px solid lightblue;
12     position:absolute;
13 }
14 
15 #star div:hover{
16     transform: scale(1.2);
17 }
18 
19 #star p{
20     margin-top: 2px;
21     padding: 0px;
22     text-align: center;
23     color: blue;
24 }
25 
26 #star img{
27     width: 180px;
28     height: 150px;
29 }
30 
31 #s1{
32     transform: rotate(-30deg);
33     top:40px;
34     left: 20px;
35 }
36 
37 #s2{
38     transform: rotate(30deg);
39     top:350px;
40     left: 400px;
41 }
42 
43 #s3{
44     transform: rotate(45deg);
45     top:200px;
46     left: 200px;
47 }
48 
49 #s4{
50     transform: rotate(60deg);
51     top:50px;
52     left: 450px;
53 }
54 
55 #s5{
56     transform: rotate(-45deg);
57     top:600px;
58     left: 500px;
59 }
60 
61 #s6{
62     transform: rotate(-60deg);
63     top:400px;
64     left: 50px;
65 }
66 
67 #s7{
68     transform: rotate(-45deg);
69     top:600px;
70     left: 200px;
71 }

View Code

备注：

关于CSS的定位【position】，详细说明如下：

static:默认定位方式，文档流方式，单独占满一行。left,top,bottom,right不起作用。
absolute:绝对定位，脱离了文档流，不会单独占满一行。方位只会受left,top,bottom,right的影响。默认距离浏览器左上角的距离。如果父元素做了定位，就相对于的是最近的父元素。如果父元素没有定位，则相对于body进行定位。
relative:相对定位，没有脱离文档流，会单独占满一行，方位会受到left,top,bottom,right的影响。相对于离它最近的父元素。
fixed：固定定位，脱离了文档流，不会单独占满一行。lef,top,bottom,right始终相对于body。

关于CSS的块级元素并排，说明如下：