前端练习3-css完成静态立方体

<! DOCTYPE  html>

< html >

   < head  >

     < title  > a.html  </ title >

     

     < meta  name  = "keywords"  content = "keyword1,keyword2,keyword3"  >

     < meta  name  = "description"  content = "this is my page" >

     < meta  name  = "content-type"  content =  "text/html; charset=UTF-8" >

   

     <!--<link rel=" stylesheet" type="text/css" href="./styles.css">-->

      < style  type  = "text/css" >

/*外框架，便于整体移动*/

.d { position  : relative ;}

.d1,.d2,.d3,.d4,.d5,.d6 { width : 100px ; height : 100px ; color : #000 ; background-color : #010108 ;

      position : absolute ; /*使立方体各个面拼接在一起*/

      text-align : center ; line-height : 100px ;}

/*正面(d1)与背面(d3)*/

.d1 { left  : 100px ; top : 100px ;

      opacity : .5 ; /*设置透明度从0.0（完全透明）~1.0（完全不透明）*/

      z-index : 10 ; /*z-index属性设置堆叠顺序*/

      color : #f00 ;}

.d3 { left  : 150px ; top : 50px ; width : 99px ; height : 99px ; line-height : 120px ; border : 1px dashed #000 ;  border-width :  0 0 1px 1px ; background-color : #666 ; opacity : .5 ; z-index : 8 }

/*右侧面(d2)与左侧面(d4)*/

.d2 { left  : 200px ; background-color : #8D8181 ; z-index : 9 ;}

.d4 { left  : 100px ; background-color : #f00 ; z-index : 7 ;}

.d2,.d4 {  top :  100px ;  width :  50px ;  opacity :  .5 ;  -webkit-transform :  skew(0deg,-45deg) ; -webkit-transform-origin  : 0px 0px ; transform :  skew(0deg,-45deg) ;  transform-origin :  0px 0px }

/*上面(d5)与下面(d6)*/

.d5 { top  : 50px ; z-index : 11 ; background-color : #B9B6B6 ; opacity : .8 ;}

.d6 { top  : 150px ; z-index : 6 ; width : 99px ; border-left : 1px dashed #000 ; background-color : transparent ;}

.d5,.d6 {  left :  100px ;  height :  50px ;  line-height :  50px ;  -webkit-transform :  skewX(-45deg) ;  -webkit-transform-origin : 0 100% ; transform : skewX(-45deg) ;  transform-origin :  0 100% }

     

      </ style  >

      < script  src  = "js/jquery-2.1.3.js"  type =  "text/javascript" ></ script  >

   </ head  >

 

   < body  >

     < div  class  = "d" >

      < div  class  = "d1" > d1 </  div >

      < div  class  = "d2" > d2 </  div >

      < div  class  = "d3" > d3 </  div >

      < div  class  = "d4" > d4 </  div >

      < div  class  = "d5" > d5 </  div >

      < div  class  = "d6" > d6 </  div >

     </ div  >

   </ body  >

</ html >

运行结果：

其中：

     z-index属性：该属性设置一个定位元素眼z轴的位置，z轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近；为负数则表示离用户更远。

属性值：

     auto     默认值；堆叠顺序与父元素相等

     number     设置元素的堆叠顺序

     inherit     规定应该从父元素继承z-index属              

                    性的值

     注：z-index可用于将一个元素放置于另一个元素之后。

     transform属性：该属性向元素应用2D或3D转换。该属性允许对元素进行旋转、缩放、移动或倾斜。

     用法：

transform:     none|transform-functions;

 属性值：

     none     定义不进行转换

     matrix(n,n,n,n,n,n)     定义2D转换，使用六个值的矩阵

     matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)         

     定义3D转换，使用16个值的4*4矩阵

     translate(x,y)     定义2D转换

     translate3d(x,y,z)     定义3D转换

     translateX(x)     定义转换，只是用X轴的值

     translateY(y)      定义转换，只是用Y轴的值

     translateZ(z)      定义3D转换，只是用Z轴的值

     scale(x,y)     定义2D缩放转换

     scale3的(x,y,z)     定义3D缩放转换

     scaleX(x)     通过设置X轴的值来定义缩放转换

     scaleY(y)     通过设置Y轴的值来定义缩放转换

     scaleZ(z)     通过设置Z轴的值来定义3D缩放转换

     rotate(angle)     定义2D旋转，在参数中规定角度

     rotate3d(x,y,z,angle)     定义3D旋转

     rotateX(angle)     定义沿着X轴的3D旋转

     rotateY(angle)     定义沿着Y轴的3D旋转

     rotateZ(angle)     定义沿着Z轴的3D旋转

     skew(x-angle,y-angle)     定义沿着X和Y轴的2D倾斜转换

     skewX(angle)     定义沿着X轴的2D倾斜转换

     skewY(angle)     定义沿着Y轴的2D倾斜转换

     perspective(n)     为3D转换元素定义透视试图