问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css3做transform的时候怎么保持旋转轴不变？

头像
all2005
    3.4k39339491
    css
    阅读 2.5k
    1 个回答
    得票最新
    头像
    好久不见
      6772214
      <html>
  <head>
    <meta charset="utf-8" />
    <title>cube3D立方体</title>
    <style>
      body {
        margin: 0px;
        padding: 0px;
        perspective: 1000px; /*设置景深*/
        transform-style: preserve-3d;
      }
      
      #triangle div {
        position: absolute;
        width: 200px;
        height: 200px;
        border: 1px solid red;
      }
      #triangle:hover {
        transform: rotateY(360deg);
        transition: 5s;
      }
      #triangle{
        position: relative;
        top: 40%;
        left: 0;
        width: 200px;
        height: 200px;
        border: 1px solid #333;
        margin: 0px auto;
        transform-style: preserve-3d;
        transform-origin: 50% 50% 50px;
        transform: rotateY(0deg);
      }
      #triangle div:nth-child(1) {
        position: absolute;
      }
      #triangle div:nth-child(2) {
        position: absolute;
        transform-origin: left center;
        transform: rotateY(-60deg);
      }
      #triangle div:nth-child(3) {
        position: absolute;
        transform-origin: right center;
        transform: rotateY(60deg);
      }
    </style>
  </head>
  <body>
   

    <div id="triangle">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

      上面写的一个demo可以参考修改下

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏