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

 找回密码
 立即注册
金黑网络»首页 › 源码编程区 › 前端教程 › html5教程 › 3D css3空间转换平移旋转，3D导航效果
返回列表 发新帖

3D css3空间转换平移旋转，3D导航效果

[复制链接]
admin 发表于 2025-5-24 14:39:30 | 显示全部楼层 |阅读模式
3D css3空间转换平移

1.jpg
  1. <title>空间平移</title>
  2.   <style>
  3.     .box {
  4.       width: 200px;
  5.       height: 200px;
  6.       margin: 100px auto;
  7.       background-color: pink;
  8.       transition: all 0.5s;
  9.     }

  11.     .box:hover {
  12.       /* 电脑是平面，默认无法观察 Z 轴平移效果 */
  13.       /* transform: translate3d(100px, 200px, 300px); */

  15.       /* 3d 小括号里面必须逗号隔开三个数 */
  16.       /* transform: translate3d(100px, 200px); */

  18.       transform: translateX(100px);
  19.       transform: translateY(-100%);
  20.       transform: translateZ(300px);
  21.     }
  22.   </style>
复制代码
2.jpg
  1. <title>透视效果</title>
  2.   <style>
  3.     /* 视距属性必须添加给 直接父级 */
  4.     .father {
  5.       perspective: 1000px;
  6.       /* perspective: 10000px;
  7.       perspective: 100px; */
  8.     }

  10.     .son {
  11.       width: 200px;
  12.       height: 200px;
  13.       margin: 100px auto;
  14.       background-color: pink;
  15.       transition: all 0.5s;
  16.     }

  18.     .son:hover{
  19.       transform: translateZ(-300px);
  20.       transform: translateZ(300px);
  21.     }
  22.   </style>
  23. </head>

  25. <body>
  26.   <div class="father">
  27.     <div class="son"></div>
  28.   </div>
  29. </body>
复制代码
1.jpg
2.jpg

  1. <title>空间旋转-Z轴</title>
  2.     <style>
  3.       .box {
  4.         width: 300px;
  5.         margin: 100px auto;
  6.       }

  8.       img {
  9.         width: 300px;
  10.         transition: all 2s;
  11.       }

  13.       .box img:hover {
  14.         transform: rotateZ(360deg);
  15.       }
  16.     </style>
  17.   </head>
  18.   <body>
  19.     <div class="box">
  20.       <img src="./images/hero.jpeg" alt="" />
  21.     </div>
  22.   </body>
复制代码

1.jpg
  1. <title>空间旋转-X轴</title>
  2.     <style>
  3.       .box {
  4.         width: 300px;
  5.         margin: 100px auto;
  6.       }

  8.       img {
  9.         width: 300px;
  10.         transition: all 2s;
  11.       }

  13.       .box {
  14.         /* 透视效果：近大远小，近实远虚 */
  15.         perspective: 1000px;
  16.       }

  18.       .box img:hover {
  19.         transform: rotateX(60deg);
  20.         transform: rotateX(-60deg);
  21.       }
  22.     </style>
  23.   </head>
  24.   <body>
  25.     <div class="box">
  26.       <img src="./images/hero.jpeg" alt="" />
  27.     </div>
  28.   </body>
复制代码
2.jpg
  1. <title>空间旋转-Y轴</title>
  2.     <style>
  3.       .box {
  4.         width: 300px;
  5.         margin: 100px auto;
  6.       }

  8.       img {
  9.         width: 300px;
  10.         transition: all 2s;
  11.       }

  13.       .box {
  14.         /* 透视效果：近大远小，近实远虚 */
  15.         perspective: 1000px;
  16.       }

  18.       .box img:hover {
  19.         transform: rotateY(60deg);
  20.         transform: rotateY(-60deg);
  21.       }
  22.     </style>
  23.   </head>
  24.   <body>
  25.     <div class="box">
  26.       <img src="./images/hero.jpeg" alt="" />
  27.     </div>
  28.   </body>
复制代码


回复

举报

 楼主| admin 发表于 2025-5-26 16:23:51 | 显示全部楼层
1.jpg

  1. <title>立体呈现</title>
  2.     <style>
  3.       .cube {
  4.         position: relative;
  5.         width: 200px;
  6.         height: 200px;
  7.         margin: 100px auto;
  8.         /* background-color: pink; */
  9.         transition: all 2s;

  11.         transform-style: preserve-3d;

  13.         /* 旋转与案例效果无关，用来看前后移动的效果 */
  14.         /* transform: rotateY(89deg); */
  15.       }

  17.       .cube div {
  18.         position: absolute;
  19.         left: 0;
  20.         top: 0;
  21.         width: 200px;
  22.         height: 200px;
  23.       }

  25.       .front {
  26.         background-color: orange;
  27.         transform: translateZ(100px);
  28.       }

  30.       .back {
  31.         background-color: green;
  32.         transform: translateZ(-100px);
  33.       }

  35.       .cube:hover {
  36.         transform: rotateY(90deg);
  37.       }
  38.     </style>
  39.   </head>
  40.   <body>
  41.     <div class="cube">
  42.       <div class="front">前面</div>
  43.       <div class="back">后面</div>
  44.     </div>
  45.   </body>
复制代码

1.jpg

  1. <title>3D导航</title>
  2.     <style>
  3.       ul {
  4.         margin: 0;
  5.         padding: 0;
  6.         list-style: none;
  7.       }

  9.       .nav {
  10.         width: 300px;
  11.         height: 40px;
  12.         margin: 50px auto;
  13.       }

  15.       .nav ul {
  16.         display: flex;
  17.       }

  19.       .nav li {
  20.         position: relative;
  21.         width: 100px;
  22.         height: 40px;
  23.         line-height: 40px;
  24.         transition: all 0.5s;

  26.         transform-style: preserve-3d;

  28.         /* 为了看到橙色和绿色的移动过程，给立方体添加旋转 */
  29.         /* transform: rotateX(-20deg) rotateY(30deg); */
  30.       }

  32.       .nav li a {
  33.         position: absolute;
  34.         left: 0;
  35.         top: 0;
  36.         display: block;
  37.         width: 100%;
  38.         height: 100%;
  39.         text-align: center;
  40.         text-decoration: none;
  41.         color: #fff;
  42.       }

  44.       /* 立方体每个面都有独立的坐标轴，互不影响 */
  45.       .nav li a:first-child {
  46.         background-color: green;
  47.         transform: translateZ(20px);
  48.       }

  50.       .nav li a:last-child {
  51.         background-color: orange;
  52.         transform: rotateX(90deg) translateZ(20px);
  53.       }

  55.       .nav li:hover {
  56.         transform: rotateX(-90deg);
  57.       }
  58.     </style>
  59.   </head>

  61.   <body>
  62.     <div class="nav">
  63.       <ul>
  64.         <li>
  65.           <a href="#">首页</a>
  66.           <a href="#">Index</a>
  67.         </li>
  68.         <li>
  69.           <a href="#">登录</a>
  70.           <a href="#">Login</a>
  71.         </li>
  72.         <li>
  73.           <a href="#">注册</a>
  74.           <a href="#">Register</a>
  75.         </li>
  76.       </ul>
  77.     </div>
  78.   </body>
复制代码


回复

举报

返回列表 发新帖

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

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

Powered by Www.Jinhei.Cn

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

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