当前位置:   article > 正文

【CSS】transform 属性详解_css transform 属性的定义

css transform 属性的定义

transform 属性的值

  • translate(x,y)、translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z) 定义位置的移动距离
  • scale(x,y)、scaleX(x)、scaleY(y)、scaleZ(z)、scale3d(x,yz) 定义元素的缩放比例
  • rotate(angle)、rotateX(angle)、rotateY(angle)、rotateZ(angle)、rotate3d(x,y,z,angle) 定义元素的旋转度
  • skew(x-angle,y-angle)、skewX(angle)、skewY(angle) 定义元素的倾斜度

3D效果认知连接源自知乎https://zhuanlan.zhihu.com/p/37991700

 

 

perspective 属性

  该属性用于激活一个3D空间,其子元素都会获得透明效果,一般 perspective 属性用于父元素。

  • 取值为 none 或 不设置,则为不激活3D空间
  • 取值越小,3D效果越明显,建议取值为元素的宽度

 

 

transform-origin 属性

  用来改变元素原点的位置,取值:

  • center 默认值 等价于( center center / 50% 50%)
  • top/right/bottom/left
  • transform-origin : x y z

使用 transform 实现 3D 立方体 预览

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>transform 实现 3D 立方体</title>
  8. <style>
  9. *{ margin: 0 auto; padding: 0; }
  10. html{
  11. cursor: pointer;
  12. background: #3023ae;
  13. background: -moz-linear-gradient(-45deg, #3023ae 0%, #c86dd7 100%);
  14. background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#3023ae), color-stop(100%,#c86dd7));
  15. background: -webkit-linear-gradient(-45deg, #3023ae 0%,#c86dd7 100%);
  16. background: -o-linear-gradient(-45deg, #3023ae 0%,#c86dd7 100%);
  17. background: -ms-linear-gradient(-45deg, #3023ae 0%,#c86dd7 100%);
  18. background: linear-gradient(135deg, #3023ae 0%,#c86dd7 100%);
  19. background-attachment: fixed;
  20. }
  21. .wrap{
  22. margin-top: 100px;
  23. perspective: 800px;
  24. perspective-origin: 50% 100px;
  25. }
  26. .cube{
  27. margin: 0 auto;
  28. position: relative;
  29. width: 200px;
  30. height: 200px;
  31. color: #fff;
  32. font-size: 2rem;
  33. line-height: 200px;
  34. text-align: center;
  35. transform-style: preserve-3d;
  36. -webkit-user-select: none;
  37. -moz-user-select: none;
  38. -moz-user-select: none;
  39. -ms-user-select: none;
  40. user-select: none;
  41. }
  42. .cube div{
  43. position: absolute;
  44. width: 200px;
  45. height: 200px;
  46. background-color: #333;
  47. opacity: 0.5;
  48. border: 1px solid #fff;
  49. }
  50. .front{
  51. -webkit-transform:translateZ(100px);
  52. -moz-transform: translateZ(100px);
  53. -o-transform: translateZ(100px);
  54. -ms-transform: translateZ(100px);
  55. transform: translateZ(100px);
  56. }
  57. .back{
  58. -webkit-transform:translateZ(-100px) rotateY(180deg);
  59. -moz-transform: translateZ(-100px) rotateY(180deg);
  60. -o-transform: translateZ(-100px) rotateY(180deg);
  61. -ms-transform: translateZ(-100px) rotateY(180deg);
  62. transform: translateZ(-100px) rotateY(180deg);
  63. }
  64. .left{
  65. -webkit-transform:translateX(-100px) rotateY(90deg);
  66. -moz-transform: translateX(-100px) rotateY(90deg);
  67. -o-transform: translateX(-100px) rotateY(90deg);
  68. -ms-transform: translateX(-100px) rotateY(90deg);
  69. transform: translateX(-100px) rotateY(90deg);
  70. }
  71. .right{
  72. -webkit-transform:translateX(100px) rotateY(-90deg);
  73. -moz-transform: translateX(100px) rotateY(-90deg);
  74. -o-transform: translateX(100px) rotateY(-90deg);
  75. -ms-transform: translateX(100px) rotateY(-90deg);
  76. transform: translateX(100px) rotateY(-90deg);
  77. }
  78. .top{
  79. -webkit-transform: translateY(-100px) rotateX(90deg);
  80. -moz-transform: translateY(-100px) rotateX(90deg);
  81. -o-transform: translateY(-100px) rotateX(90deg);
  82. -ms-transform: translateY(-100px) rotateX(90deg);
  83. transform: translateY(-100px) rotateX(90deg);
  84. }
  85. .bottom{
  86. -webkit-transform: translateY(100px) rotateX(-90deg);
  87. -moz-transform: translateY(100px) rotateX(-90deg);
  88. -o-transform: translateY(100px) rotateX(-90deg);
  89. -ms-transform: translateY(100px) rotateX(-90deg);
  90. transform: translateY(100px) rotateX(-90deg);
  91. }
  92. </style>
  93. </head>
  94. <body>
  95. <div class="wrap">
  96. <div class="cube">
  97. <div class="front"></div>
  98. <div class="back"></div>
  99. <div class="left"></div>
  100. <div class="right"></div>
  101. <div class="top"></div>
  102. <div class="bottom"></div>
  103. </div>
  104. </div>
  105. <script>
  106. var mouseDown = false;
  107. var mousePoint = { x : 0 , y : 0 };
  108. var cubeRotate = { x : 0 , y : 0};
  109. window.onload = function(){
  110. document.onmousedown = function(e){
  111. mouseDown = true;
  112. mousePoint.x = e.pageX;
  113. mousePoint.y = e.pageY;
  114. }
  115. document.onmousemove = function(e){
  116. if(mouseDown){
  117. let x = e.pageX - mousePoint.x;
  118. let y = e.pageY - mousePoint.y;
  119. cubeRotate.x += x / 30;
  120. cubeRotate.y += y / 30;
  121. document.querySelector('.cube').style = `transition:linear;transform:rotateX(${cubeRotate.x}deg) rotateY(${cubeRotate.y}deg)`;
  122. }
  123. }
  124. document.onmouseup = function(e){
  125. mouseDown = false;
  126. }
  127. }
  128. </script>
  129. </body>
  130. </html>

 

深入认识Document

yuyuy...发表于极乐科技

css加载会造成阻塞吗

本文由云+社区发表 作者:嘿嘿嘿可能大家都知道,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?接下来,我就来对css加载对DOM树的解析和渲染的影响做一个测试。…

inline-block 和 block

Inline:接受 left &amp; right margins and padding, 不接受 not top &amp; bottom不具有 width 和 height 允许其他元素坐在左右。Block:接受所有的边距宽高等属性换行Inline-block:允许其…

前端日常:常用JavaScript判断数据类型

前端日常:常用JavaScript判断数据类型

 

还没有评论

写下你的评论.

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/blog/article/detail/60331
推荐阅读