css3如何实现2d转化

魁首哥

作者

css3如何实现2d转化

这篇文章主要介绍“css3如何实现2d转化”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“css3如何实现2d转化”文章能帮助大家解决问题。

在css3中，可以使用transform属性配合translate()、scale()、rotate()、skew()、skewX()、skewY()等函数实现元素的2d转化，将元素进行旋转，缩放，移动，倾斜等。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

在css3中，可以使用transform属性实现2d转化。

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

transform属性实现2d转化的函数

值	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
scale(x[,y]?)	定义 2D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。

示例：

<!DOCTYPEhtml><html><head><style>*,*:after,*:before{box-sizing:border-box;}body{background:#F5F3F4;margin:0;padding:10px;font-family:'OpenSans',sans-serif;text-align:center;}h3,h5{font-weight:400;color:#4d4d4d;}.card{display:inline-block;margin:10px;background:#fff;padding:10px;min-width:180px;box-shadow:03px5px#ddd;color:#555;}.card.box{width:60px;height:60px;margin:auto;background:#ddd;cursor:pointer;box-shadow:005px#cccinset;}.card.box.fill{width:60px;height:60px;position:relative;background:#03A9F4;opacity:.5;box-shadow:005px#ccc;-webkit-transition:0.3s;transition:0.3s;}.cardp{margin:25px00;}.rotate:hover.fill{-webkit-transform:rotate(45deg);transform:rotate(45deg);}.scale:hover.fill{-webkit-transform:scale(2,2);transform:scale(2,2);}.scaleX:hover.fill{-webkit-transform:scaleX(2);transform:scaleX(2);}.scaleY:hover.fill{-webkit-transform:scaleY(2);transform:scaleY(2);}.skew:hover.fill{-webkit-transform:skew(45deg,45deg);transform:skew(45deg,45deg);}.skewX:hover.fill{-webkit-transform:skewX(45deg);transform:skewX(45deg);}.skewY:hover.fill{-webkit-transform:skewY(45deg);transform:skewY(45deg);}.translate:hover.fill{-webkit-transform:translate(45px,1em);transform:translate(45px,1em);}.translateX:hover.fill{-webkit-transform:translateX(45px);transform:translateX(45px);}.translateY:hover.fill{-webkit-transform:translateY(45px);transform:translateY(45px);}.matrix:hover.fill{-webkit-transform:matrix(2,2,0,2,45,0);transform:matrix(2,2,0,2,45,0);}</style></head><body><divclass="card"><divclass="boxrotate"><divclass="fill"></div></div><p>rotate(45deg)</p></div><divclass="card"><divclass="boxscale"><divclass="fill"></div></div><p>scale(2)</p></div><divclass="card"><divclass="boxscaleX"><divclass="fill"></div></div><p>scaleX(2)</p></div><divclass="card"><divclass="boxscaleY"><divclass="fill"></div></div><p>scaleY(2)</p></div><divclass="card"><divclass="boxskew"><divclass="fill"></div></div><p>skew(45deg,45deg)</p></div><divclass="card"><divclass="boxskewX"><divclass="fill"></div></div><p>skewX(45deg)</p></div><divclass="card"><divclass="boxskewY"><divclass="fill"></div></div><p>skewY(45deg)</p></div><divclass="card"><divclass="boxtranslate"><divclass="fill"></div></div><p>translate(45px)</p></div><divclass="card"><divclass="boxtranslateX"><divclass="fill"></div></div><p>translateX(45px)</p></div><divclass="card"><divclass="boxtranslateY"><divclass="fill"></div></div><p>translateY(45px)</p></div><divclass="card"><divclass="boxmatrix"><divclass="fill"></div></div><p>matrix(2,2,0,2,45,0)</p></div></body></html>