当前位置: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网其它相关文章!

人气教程排行