css3-3D旋转 透视 位移等属性

刺骨的言语ヽ痛彻心扉 2022-07-14 00:42 250阅读 0赞 
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8. <!--------------------------------3D变换之旋转------------------------------------------>
  9.             <!-- 取值可以是正 可以是负 负值朝反方向转-->
  10.             <!-- 绕X轴顺时针旋转 360度-->
  11.             <!--.rotateX:hover img{
  12.             transform:rotateX(360deg);
  13.             }-->
  15.             <!--绕Y轴顺时针旋转 360度 -->
  16.             <!--.rotateX:hover img{
  17.             transform:rotateY(360deg);
  18.             }-->
  20.             <!--绕Z轴顺时针旋转 360度 -->
  21.             <!--.rotateX:hover img{
  22.             transform:rotateZ(360deg);
  23.             }-->
  25. <!----------------------------------3D变换之位移------------------------------------------->
  28.             <!-- 沿着X轴正方向移动 300px-->
  29.             <!--.rotateX:hover img{
  30.             transform:translateX(300px);
  31.             }-->
  33.             <!-- 沿着Y轴正方向移动 300px-->
  34.             <!--.rotateX:hover img{
  35.             transform:translateY(300px);
  36.             }-->
  38.             <!-- 沿着Z轴正方向移动 300px-->
  39.             <!--.rotateX:hover img{
  40.             transform:translateZ(300px);
  41.             }-->
  43. <!--------------------------------3D变换之透视------------------------------------------->
  45.             <!--透视-->
  46.             <!-- 透视 设置的 用户 眼睛和屏幕的距离
  47.                 仅仅只是视觉呈现出3d 效果，并不是正真的3d
  48.              -->
  49.             <!--perspective: 400px;-->
  51.             <!--可以让里面的子盒子保持3d 效果，加给父盒子-->
  52.             <!-- preseve-3d: 让子盒子 位于3d空间里面-->
  53.             <!--flat： 子盒子被扁平化-->
  54.             <!--transform-style:preserve-3d;-->
  55. </body>
  56. </html>

发表评论

表情：
评论列表 （有 0 条评论，250人围观）

还没有评论，来说两句吧...

相关阅读