2d3d转换方法css,css transform 2D3D转换

2D转换

translate 移动

div{ 100px; height: 100px; }

.box{ border: 1px dashed red; float: left; margin-right: 80px;}

.boxs{ background: #ff000061; border: 1px solid #ccc; }

.box1{ transform: translateX(50px); }

.box2{ transform: translate(20px, 20px); }

.box3{ transform: translateY(50px); }

translateX()

translate()

translateY()

rotate 旋转

div{ 100px; height: 100px; }

.box{ border: 1px dashed red; float: left; margin-right: 50px;}

.boxs{ background: #ff000061; border: 1px solid #ccc; }

.box1{ transform: rotate(45deg); }

.box2{ transform: rotate(90deg); }

rotate(45deg)

rotate(90deg)

瞬时间方向旋转，值为负数时则反方向

scale 放大缩小

div{ 100px; height: 100px; }

.box{ border: 1px dashed red; float: left; margin-right: 80px;}

.boxs{ background: #ff000061; border: 1px solid #ccc; }

.box1{ transform: scale(2, 1.2); }

.box2{ transform: scale(0.9); }

.box3{ transform: scale(1.2); }

scale(2, 1.2)

scale(0.9)

scale(1.2)

skew 倾斜

div{ 100px; height: 100px; }

.box{ border: 1px dashed red; float: left; margin-right: 80px;}

.boxs{ background: #ff000061; border: 1px solid #ccc; }

.box1{ transform: skew(20deg, 20deg); }

.box2{ transform: skewX(45deg); }

.box3{ transform: skewY(45deg); }

skew(20deg, 20deg)

skewX(45deg)

skewY(45deg)

matrix 2D变换方法合并

matrix 方法有六个参数，包含旋转，缩放，移动(平移)和倾斜功能。

3D转换