设为首页收藏本站
联系我们切换到宽版

 找回密码
 立即注册
金黑网络»首页 › 源码编程区 › 前端教程 › html5教程 › css移动web平面转换transform
返回列表 发新帖

css移动web平面转换transform

[复制链接]
admin 发表于 2025-5-20 16:21:39 | 显示全部楼层 |阅读模式
css移动web平面转换transform

1.jpg
1.jpg
  1. <title>体验平面转换</title>
  2.   <style>
  3.     div {
  4.       margin: 100px 0;

  6.       width: 100px;
  7.       height: 100px;
  8.       background-color: pink;
  9.       
  10.       transition: all 1s;
  11.     }

  13.     /* 鼠标滑过：添加动态效果 */
  14.     div:hover {
  15.       transform: translate(800px) rotate(360deg) scale(2) skew(180deg);
  16.     }
  17.    
  18.   </style>
  19. </head>
  20. <body>
  21.   <div></div>
  22. </body>
复制代码
skew 倾斜 scale放大 rotate旋转 translate移动
回复

举报

 楼主| admin 发表于 2025-5-20 16:37:44 | 显示全部楼层
  1. <title>平移效果</title>
  2.     <style>
  3.         .father {
  4.             width: 500px;
  5.             height: 300px;
  6.             margin: 100px auto;
  7.             border: 1px solid #000;
  8.         }
  9.         
  10.         .son {
  11.             width: 200px;
  12.             height: 100px;
  13.             background-color: pink;
  14.             transition: all 0.5s;
  15.         }
  16.    
  17.         /* 鼠标移入到父盒子，son改变位置 */
  18.         .father:hover .son {
  19.             transform: translate(200px, 100px);

  21.             /* 百分比：参照盒子自身尺寸计算结果 */
  22.             transform: translate(50%, 100%);
  23.             transform: translate(-50%, 100%);

  25.             /* 只写一个数表示水平方向 */
  26.             transform: translate(100px);

  28.             transform: translateY(100px);
  29.             transform: translateX(100px);
  30.         }
  31.         
  32.     </style>
  33. </head>

  35. <body>
  36.     <div class="father">
  37.         <div class="son"></div>
  38.     </div>
  39. </body>
复制代码
  1. <title>绝对定位元素居中效果</title>
  2.     <style>
  3.         .box {
  4.             position: absolute;
  5.             left: 50%;
  6.             top: 50%;

  8.             /* 向左向上移动自身尺寸的一半 */
  9.             transform: translate(-50%, -50%);

  11.             width: 200px;
  12.             height: 100px;
  13.             background-color: pink;         
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <div class="box"></div>
  19. </body>
复制代码
1.jpg


  1. <title>双开门</title>
  2.     <style>
  3.         * {
  4.             margin: 0;
  5.             padding: 0;
  6.         }
  7.         
  8.         /* 1. 布局：父子结构，父级是大图，子级是左右小图 */
  9.         .father {
  10.             display: flex;
  11.             margin: 0 auto;
  12.             width: 1366px;
  13.             height: 600px;
  14.             background-image: url(./images/bg.jpg);

  16.             overflow: hidden;
  17.         }

  19.         .father .left,
  20.         .father .right {
  21.             width: 50%;
  22.             height: 600px;
  23.             background-image: url(./images/fm.jpg);

  25.             transition: all .5s;
  26.         }

  28.         .father .right {
  29.             /* right 表示的取到精灵图右面的图片 */
  30.             background-position: right 0;
  31.         }

  33.         /* 2. 鼠标悬停的效果：左右移动 */
  34.         .father:hover .left {
  35.             transform: translate(-100%);
  36.         }

  38.         .father:hover .right {
  39.             transform: translateX(100%);
  40.         }
  41.     </style>
  42. </head>

  44. <body>
  45.     <div class="father">
  46.         <div class="left"></div>
  47.         <div class="right"></div>
  48.     </div>
  49. </body>
复制代码


回复

举报

 楼主| admin 发表于 2025-5-20 16:41:29 | 显示全部楼层
admin 发表于 2025-5-20 16:37

1.jpg

  1. <title>旋转效果</title>
  2.   <style>
  3.     img {
  4.       width: 200px;
  5.       transition: all 2s;
  6.     }

  8.     /* 鼠标悬停到图片上面，添加旋转效果 */
  9.     img:hover {
  10.       /* 正数：顺时针旋转；负数：逆时针旋转 */
  11.       transform: rotate(360deg);
  12.       transform: rotate(-360deg);
  13.     }
  14.   </style>
  15. </head>
  16. <body>
  17.   <img src="./images/rotate.png" alt="">
  18. </body>
复制代码

2.jpg

1.jpg


1.jpg

  1. <title>多重转换</title>
  2.     <style>
  3.       .box {
  4.         width: 800px;
  5.         height: 200px;
  6.         border: 1px solid #000;
  7.       }

  9.       img {
  10.         width: 200px;
  11.         transition: all 5s;
  12.       }

  14.       /* 鼠标移入box，图片边走边转 */
  15.       .box:hover img {
  16.         /* 先平移再旋转 */
  17.         transform: translate(600px) rotate(360deg);

  19.         /* 旋转会改变坐标轴向 */
  20.         /* 多重转换：以第一种转换形态的坐标轴为准 */
  21.         /* transform: rotate(360deg) translate(600px); */

  23.         /* 层叠性 */
  24.         /* transform: translate(600px);
  25.         transform: rotate(360deg); */
  26.       }
  27.     </style>
  28.   </head>

  30.   <body>
  31.     <div class="box">
  32.       <img src="./images/tyre1.png" alt="" />
  33.     </div>
  34.   </body>
复制代码


回复

举报

 楼主| admin 发表于 2025-5-20 16:54:17 | 显示全部楼层
1.jpg

  1. <title>缩放效果</title>
  2.     <style>
  3.       .box {
  4.         width: 300px;
  5.         height: 210px;
  6.         margin: 100px auto;
  7.         background-color: pink;
  8.       }

  10.       .box img {
  11.         width: 100%;
  12.         transition: all 0.5s;
  13.       }

  15.       .box:hover img {
  16.         /* 修改宽高尺寸，从左上角开始缩放 */
  17.         /* width: 500px;
  18.         height: 400px; */

  20.         /* 大于1，表示放大 */
  21.         transform: scale(2);

  23.         /* 小于1，表示缩小 */
  24.         transform: scale(0.5);

  26.         /* 等于1，不变 */
  27.         transform: scale(1);
  28.       }
  29.     </style>
复制代码

1.jpg

  1. <title>按钮缩放</title>
  2.     <style>
  3.       * {
  4.         margin: 0;
  5.         padding: 0;
  6.       }

  8.       li {
  9.         list-style: none;
  10.       }

  12.       img {
  13.         width: 100%;
  14.       }

  16.       .box {
  17.         width: 249px;
  18.         height: 210px;
  19.         margin: 50px auto;     
  20.       }

  22.       .box p {
  23.         color: #3b3b3b;
  24.         padding: 10px 10px 0 10px;
  25.       }

  27.       /* 1. 摆放播放按钮：图片区域的中间 */
  28.       .box li {
  29.         overflow: hidden;
  30.       }
  31.       
  32.       .pic {
  33.         position: relative;
  34.       }

  36.       .pic::after {
  37.         position: absolute;
  38.         left: 50%;
  39.         top: 50%;
  40.         /* margin-left: -29px;
  41.         margin-top: -29px; */
  42.         /* transform: translate(-50%, -50%); */

  44.         content: '';
  45.         width: 58px;
  46.         height: 58px;
  47.         background-image: url(./images/play.png);
  48.         transform: translate(-50%, -50%) scale(5);
  49.         opacity: 0;

  51.         transition: all .5s;
  52.       }
  53.       /* 2. hover效果：大按钮，看不见：透明是0 → 小按钮，看得见：透明度1 */
  54.       .box li:hover .pic::after {
  55.         transform: translate(-50%, -50%) scale(1);
  56.         opacity: 1;
  57.       }
  58.     </style>
  59.   </head>
  60.   <body>
  61.     <div class="box">
  62.       <ul>
  63.         <li>
  64.           <div class="pic">
  65.             <img src="./images/party.jpeg" alt="" />
  66.           </div>
  67.           <p>【和平精英】“初火”音乐概念片：四圣觉醒......</p>
  68.         </li>
  69.       </ul>
  70.     </div>
  71.   </body>
复制代码


回复

举报

 楼主| admin 发表于 2025-5-20 17:25:54 | 显示全部楼层
admin 发表于 2025-5-20 16:54

1.jpg

2.jpg

  1. <title>倾斜效果</title>
  2.     <style>
  3.       div {
  4.         margin: 100px auto;
  5.         width: 100px;
  6.         height: 200px;
  7.         background-color: pink;
  8.         transition: all 0.5s;
  9.       }

  11.       div:hover {
  12.         transform: skew(30deg);
  13.         transform: skew(-30deg);
  14.       }
  15.     </style>
  16.   </head>
  17.   <body>
  18.     <div></div>
  19.   </body>
复制代码


回复

举报

 楼主| admin 发表于 2025-5-20 17:34:25 | 显示全部楼层
admin 发表于 2025-5-20 17:25

1.jpg

2.jpg

  1. <style>
  2.       div {
  3.         width: 200px;
  4.         height: 200px;
  5.         background-color: green;
  6.         background-image: linear-gradient(
  7.           red,
  8.           green
  9.         );
  10.         background-image: linear-gradient(
  11.           to right,
  12.           red,
  13.           green
  14.         );
  15.         background-image: linear-gradient(
  16.           45deg,
  17.           red,
  18.           green
  19.         );
  20.         background-image: linear-gradient(
  21.           red 80%,
  22.           green
  23.         );
  24.       }
  25.     </style>
  26.   </head>
  27.   <body>
  28.     <div></div>
  29.   </body>
复制代码
1.jpg 2.jpg 3.jpg 4.jpg

1.jpg

  1. <title>产品展示效果</title>
  2.     <style>
  3.       .box {
  4.         position: relative;
  5.         width: 300px;
  6.         height: 212px;
  7.       }

  9.       .box img {
  10.         width: 300px;
  11.       }

  13.       .box .title {
  14.         position: absolute;
  15.         left: 15px;
  16.         bottom: 20px;
  17.         z-index: 2;
  18.         width: 260px;
  19.         color: #fff;
  20.         font-size: 20px;
  21.         font-weight: 700;
  22.       }

  24.       .mask {
  25.         position: absolute;
  26.         left: 0;
  27.         top: 0;
  28.         width: 100%;
  29.         height: 100%;
  30.         background-image: linear-gradient(
  31.             transparent,
  32.             rgba(0,0,0,0.5)
  33.         );
  34.         opacity: 0;

  36.         transition: all .5s;
  37.       }

  39.       .box:hover .mask {
  40.         opacity: 1;
  41.       }
  42.     </style>
  43.   </head>

  45.   <body>
  46.     <div class="box">
  47.       <img src="./images/product.jpeg" alt="" />
  48.       <div class="title">OceanStor Pacific 海量存储斩获2021 Interop金奖</div>
  49.       <div class="mask"></div>
  50.     </div>
  51.   </body>
复制代码


回复

举报

 楼主| admin 发表于 2025-5-20 17:40:42 | 显示全部楼层
admin 发表于 2025-5-20 17:34

1.jpg

  1. <title>Document</title>
  2.   <style>
  3.     div {
  4.       width: 100px;
  5.       height: 100px;
  6.       background-color: pink;
  7.       border-radius: 50%;
  8.       background-image: radial-gradient(
  9.         50px at center center,
  10.         red,
  11.         pink
  12.       );
  13.       background-image: radial-gradient(
  14.         50px 20px at center center,
  15.         red,
  16.         pink
  17.       );
  18.       background-image: radial-gradient(
  19.         50px at 50px 30px,
  20.         red,
  21.         pink 50%
  22.       );
  23.     }

  25.     button {
  26.       width: 100px;
  27.       height: 40px;
  28.       background-color: green;
  29.       border: 0;
  30.       border-radius: 5px;
  31.       color: #fff;
  32.       background-image: radial-gradient(
  33.         30px at 30px 20px,
  34.         rgba(255, 255, 255, 0.2),
  35.         transparent
  36.       );
  37.     }
  38.   </style>
  39. </head>
  40. <body>
  41.   <div></div>
  42.   <button>按钮</button>
  43. </body>
复制代码
2.jpg

1.jpg 2.jpg 3.jpg 1.jpg 2.jpg


回复

举报

返回列表 发新帖

QQ|网站地图|Archiver|手机版|金黑网络 ( 粤ICP备2021124338号 )

网站建设，微信公众号小程序制作，商城系统开发，高端系统定制，app软件开发，智能物联网开发，直播带货系统等

Powered by Www.Jinhei.Cn

Copyright © 2013-2024 深圳市金黑网络技术有限公司 版权所有

快速回复 返回顶部 返回列表