最终结果

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>
说点什么
欢迎骚扰,有缘人互加友链
支持Markdown语法
好耶,沙发还空着ヾ(≧▽≦*)o
Loading...