最终结果
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>