当前位置：Gxlcms > css > transform属性怎么使用

transform属性怎么使用

时间：2021-07-01 10:21:17 帮助过：97人阅读

transform属性用于向元素应用 2D 或 3D 转换；该属性允许我们对元素进行旋转、缩放、移动或倾斜。

CSS3 transform属性

作用：transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

语法：

  1. transform: none|transform-functions;

可有属性值说明：

none：定义不进行转换。

matrix(n,n,n,n,n,n)：定义 2D 转换，使用六个值的矩阵。

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。

translate(x,y)：定义 2D 转换。

translate3d(x,y,z)：定义 3D 转换。

translateX(x)：定义转换，只是用 X 轴的值。

translateY(y)：定义转换，只是用 Y 轴的值。

translateZ(z)：定义 3D 转换，只是用 Z 轴的值。

scale(x,y)：定义 2D 缩放转换。

scale3d(x,y,z)：定义 3D 缩放转换。

scaleX(x)：通过设置 X 轴的值来定义缩放转换。

scaleY(y)：通过设置 Y 轴的值来定义缩放转换。

scaleZ(z)：通过设置 Z 轴的值来定义 3D 缩放转换。

rotate(angle)：定义 2D 旋转，在参数中规定角度。

rotate3d(x,y,z,angle)：定义 3D 旋转。

rotateX(angle)：定义沿着 X 轴的 3D 旋转。

rotateY(angle)：定义沿着 Y 轴的 3D 旋转。

rotateZ(angle)：定义沿着 Z 轴的 3D 旋转。

skew(x-angle,y-angle)：定义沿着 X 和 Y 轴的 2D 倾斜转换。

skewX(angle)：定义沿着 X 轴的 2D 倾斜转换。

skewY(angle)：定义沿着 Y 轴的 2D 倾斜转换。

perspective(n)：为 3D 转换元素定义透视视图。

注：Internet Explorer 10、Firefox、Opera 支持 transform 属性。Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。Opera 只支持 2D 转换。

CSS3 transform属性的使用示例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style> 
  5. *, *:after, *:before {
  6.   box-sizing: border-box;
  7. }
  8. body {
  9.   background: #F5F3F4;
  10.   margin: 0;
  11.   padding: 10px;
  12.   font-family: 'Open Sans', sans-serif;
  13.   text-align: center;
  14. }
  15. h2, h4 {
  16.   font-weight: 400;
  17.   color: #4d4d4d;
  18. }
  19. .card {
  20.   display: inline-block;
  21.   margin: 10px;
  22.   background: #fff;
  23.   padding: 10px;
  24.   min-width: 180px;
  25.   box-shadow: 0 3px 5px #ddd;
  26.   color: #555;
  27. }
  28. .card .box {
  29.   width: 60px;
  30.   height: 60px;
  31.   margin: auto;
  32.   background: #ddd;
  33.   cursor: pointer;
  34.   box-shadow: 0 0 5px #ccc inset;
  35. }
  36. .card .box .fill {
  37.   width: 60px;
  38.   height: 60px;
  39.   position: relative;
  40.   background: #03A9F4;
  41.   opacity: .5;
  42.   box-shadow: 0 0 5px #ccc;
  43.   -webkit-transition: 0.3s;
  44.   transition: 0.3s;
  45. }
  46. .card p {
  47.   margin: 25px 0 0;
  48. }
  49. .rotate:hover .fill {
  50.   -webkit-transform: rotate(45deg);
  51.   transform: rotate(45deg);
  52. }
  53. .rotateX:hover .fill {
  54.   -webkit-transform: rotateX(45deg);
  55.   transform: rotateX(45deg);
  56. }
  57. .rotateY:hover .fill {
  58.   -webkit-transform: rotateY(45deg);
  59.   transform: rotateY(45deg);
  60. }
  61. .rotateZ:hover .fill {
  62.   -webkit-transform: rotate(45deg);
  63.   transform: rotate(45deg);
  64. }
  65. .scale:hover .fill {
  66.   -webkit-transform: scale(2, 2);
  67.   transform: scale(2, 2);
  68. }
  69. .scaleX:hover .fill {
  70.   -webkit-transform: scaleX(2);
  71.   transform: scaleX(2);
  72. }
  73. .scaleY:hover .fill {
  74.   -webkit-transform: scaleY(2);
  75.   transform: scaleY(2);
  76. }
  77. .skew:hover .fill {
  78.   -webkit-transform: skew(45deg, 45deg);
  79.   transform: skew(45deg, 45deg);
  80. }
  81. .skewX:hover .fill {
  82.   -webkit-transform: skewX(45deg);
  83.   transform: skewX(45deg);
  84. }
  85. .skewY:hover .fill {
  86.   -webkit-transform: skewY(45deg);
  87.   transform: skewY(45deg);
  88. }
  89. .translate:hover .fill {
  90.   -webkit-transform: translate(45px, 1em);
  91.   transform: translate(45px, 1em);
  92. }
  93. .translateX:hover .fill {
  94.   -webkit-transform: translateX(45px);
  95.   transform: translateX(45px);
  96. }
  97. .translateY:hover .fill {
  98.   -webkit-transform: translateY(45px);
  99.   transform: translateY(45px);
  100. }
  101. .matrix:hover .fill {
  102.   -webkit-transform: matrix(2, 2, 0, 2, 45, 0);
  103.   transform: matrix(2, 2, 0, 2, 45, 0);
  104. }
  105. </style>
  106. </head>
  107. <body>
  108. <!-- Rotate-->
  109. <div class="card">
  110.   <div class="box rotate">
  111.     <div class="fill"></div>
  112.   </div>
  113.   <p>rotate(45deg)  </p>
  114. </div>
  115. <div class="card">
  116.   <div class="box rotateX">
  117.     <div class="fill"></div>
  118.   </div>
  119.   <p>rotateX(45deg)</p>
  120. </div>
  121. <div class="card">
  122.   <div class="box rotateY">
  123.     <div class="fill"></div>
  124.   </div>
  125.   <p>rotateY(45deg)</p>
  126. </div>
  127. <div class="card">
  128.   <div class="box rotateZ">
  129.     <div class="fill"></div>
  130.   </div>
  131.   <p>rotateZ(45deg)  </p>
  132. </div>
  133. <!-- scale-->
  134. <div class="card">
  135.   <div class="box scale">
  136.     <div class="fill"></div>
  137.   </div>
  138.   <p>scale(2)</p>
  139. </div>
  140. <div class="card">
  141.   <div class="box scaleX">
  142.     <div class="fill"></div>
  143.   </div>
  144.   <p>scaleX(2)    </p>
  145. </div>
  146. <div class="card">
  147.   <div class="box scaleY">
  148.     <div class="fill"></div>
  149.   </div>
  150.   <p>scaleY(2)    </p>
  151. </div>
  152. <!-- skew-->
  153. <div class="card">
  154.   <div class="box skew">
  155.     <div class="fill"></div>
  156.   </div>
  157.   <p>skew(45deg, 45deg)  </p>
  158. </div>
  159. <div class="card">
  160.   <div class="box skewX">
  161.     <div class="fill"></div>
  162.   </div>
  163.   <p>skewX(45deg)</p>
  164. </div>
  165. <div class="card">
  166.   <div class="box skewY">
  167.     <div class="fill"></div>
  168.   </div>
  169.   <p>skewY(45deg)</p>
  170. </div>
  171. <!-- translate-->
  172. <div class="card">
  173.   <div class="box translate">
  174.     <div class="fill"></div>
  175.   </div>
  176.   <p>translate(45px)  </p>
  177. </div>
  178. <div class="card">
  179.   <div class="box translateX">
  180.     <div class="fill"></div>
  181.   </div>
  182.   <p>translateX(45px)</p>
  183. </div>
  184. <div class="card">
  185.   <div class="box translateY">
  186.     <div class="fill"></div>
  187.   </div>
  188.   <p>translateY(45px)</p>
  189. </div>
  190. <div class="card">
  191.   <div class="box matrix">
  192.     <div class="fill"></div>
  193.   </div>
  194.   <p> matrix(2, 2, 0, 2, 45, 0)</p>
  195. </div>
  196. </body>
  197. </html>

效果图：

1.gif

以上就是transform属性怎么使用的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！