首页 网络技术
  1. 正文

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 倾斜转换。

示例:

<!DOCTYPE html><html><head><style>*,*:after,*:before {box-sizing: border-box;}body {background: #F5F3F4;margin: 0;padding: 10px;font-family: 'Open Sans', 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: 0 3px 5px #ddd;color: #555;}.card .box {width: 60px;height: 60px;margin: auto;background: #ddd;cursor: pointer;box-shadow: 0 0 5px #ccc inset;}.card .box .fill {width: 60px;height: 60px;position: relative;background: #03A9F4;opacity: .5;box-shadow: 0 0 5px #ccc;-webkit-transition: 0.3s;transition: 0.3s;}.card p {margin: 25px 0 0;}.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><!-- Rotate--><div class="card"><div class="box rotate"><div class="fill"></div></div><p>rotate(45deg) </p></div><!-- scale--><div class="card"><div class="box scale"><div class="fill"></div></div><p>scale(2)</p></div><div class="card"><div class="box scaleX"><div class="fill"></div></div><p>scaleX(2) </p></div><div class="card"><div class="box scaleY"><div class="fill"></div></div><p>scaleY(2) </p></div><!-- skew--><div class="card"><div class="box skew"><div class="fill"></div></div><p>skew(45deg, 45deg) </p></div><div class="card"><div class="box skewX"><div class="fill"></div></div><p>skewX(45deg)</p></div><div class="card"><div class="box skewY"><div class="fill"></div></div><p>skewY(45deg)</p></div><!-- translate--><div class="card"><div class="box translate"><div class="fill"></div></div><p>translate(45px) </p></div><div class="card"><div class="box translateX"><div class="fill"></div></div><p>translateX(45px)</p></div><div class="card"><div class="box translateY"><div class="fill"></div></div><p>translateY(45px)</p></div><div class="card"><div class="box matrix"><div class="fill"></div></div><p> matrix(2, 2, 0, 2, 45, 0)</p></div></body></html>

本文标题:css3如何实现2d转化
本文链接:https://www.qqooo.cn/post/6481.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 xsds@vip.qq.com 处理,谢谢!