最终结果

CSS3中的变形transform

transform主要包含以下几种方法：

• 平移translate

/*横向移动x*/
transform:translateX(x);
/*纵向移动自身的50%*/
transform:translateY(50%);
/*简写*/
transform:translate(x,y); 

通常，以元素左上角为原点，水平向右为x正方向，竖直向下为y正方向。

• 缩放scale

/*分别设置横向和纵向缩放多少*/ 
transform:scaleX(x); 
transform:scaleY(y);
/*横向缩放x，纵向缩放y*/ 
transform:scale(x,y);

• 旋转rotate

transform:rotate(度数);/*度数为正，2D顺时针*/
transform:rotateX(度数);/*3D绕X轴旋转*/
transform:rotateX(度数);/*3D绕Y轴旋转*/

• 倾斜skew

/* 分别设置横向和纵向倾斜多少 */ 
transform:skewX(x); 
transform:skewY(y);
/* 横向倾斜x，纵向倾斜y */ 
transform:skew(x,y);

• 可以同时叠加多个操作，以空格隔开

transform:scale(2,2) translate(100px,100px) rotate(30deg) skew(10deg,20deg);

• 可以指定变形的基准点，默认元素中心

transform‐origin: x轴 y轴;
	/*x轴	left center right，
	y轴	top	center bottom
注：除了可以使用关键字，也可使用像素、百分比来设置*/

CSS3画一个立方体

       
        div{
            width: 100px;
            height: 100px;
            border: 0.5px solid #ccc;
            box-sizing: border-box;
        }
        .before{
            background-color: rgb(150, 223, 245);
            transform: translate(200px,100px);
        }
        .top{
            background-color: rgb(150, 223, 245);
            transform: translate(215px,-65px) skew(-45deg,0deg) scale(1,0.3);
        }
        .right{
            background-color: rgb(150, 223, 245);
            transform: translate(265px,-115px) skew(0deg,-45deg) scale(0.3,1);
        }
        .left{
            position: absolute;
            background-color: rgb(150, 223, 245,0); /*透明度设为0*/
            border-top: 0.5px solid #ccc;
            border-left: 0.5px solid #ccc;
            border-right: 2px dashed #ccc;
            border-bottom: 2px dashed #ccc;
            transform: translate(165px,-215px) skew(0deg,-45deg) scale(0.3,1);
        }
        /*最后再加一条虚线，即可展现立方体*/
        .after{
            height: 1px;
            border-top: 1px dashed #ccc;
            transform: translate(229px,-131px);
        }

需要四个主要的div画立方体的四个面，立方体的后面用虚线在前面画的基础上勾勒。

 <!-- 前面 -->
 <div class="before"></div>
 <!-- 顶面 -->
 <div class="top"></div>
 <!-- 右面 -->
 <div class="right"></div>
 <!-- 左面 -->
 <div class="left"></div>
 <!-- 一条虚线 -->
 <div class="after"></div>