图解正方体旋转的translate3D原理

yankeys 发布于2019-08-30 13:54 / 2115人阅读

摘要：如何写出一个正方体效果视距初始位置旋转一定的角度以便看到立体效果前面面对着你来讲后面左面右面上面下面图解旋转原理

如何写出一个正方体？

  
            
            
            
            
            
            



----------
 //3D 效果
  perspective: 2000px;//视距
  .box{
    width:5rem;
    height:5rem;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(45deg);//初始位置旋转一定的角度以便看到立体效果
  
    li{
      &:nth-child(1){//前面 面对着你来讲
        transform: translateZ(2.5rem);
      }
      &:nth-child(2){//后面
        transform: translateZ(-2.5rem) rotateY(180deg);
      }
      &:nth-child(3){//左面
        transform: translateX(-2.5rem) rotateY(-90deg);
      }
      &:nth-child(4){//右面
        transform: translateX(2.5rem) rotateY(90deg);
      }
      &:nth-child(5){//上面
        transform: translateY(-2.5rem) rotateX(90deg);
      }
      &:nth-child(6){//下面
        transform: translateY(2.5rem) rotateX(-90deg);
      }

    }
  }

图解旋转原理

私有云混合云正方体旋转 html 旋转立方体 js控制立方体旋转 js鼠标拖动3D立方体旋转

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115628.html

CSS中那些微妙模糊的属性

摘要：在前端开发中，我经常碰到一些不能马上理解的属性，于是打算以后但凡碰到这些微妙又模糊的属性，都归纳到这里。如图看过有关相关博客收集在这里个人觉得第一篇最好立方体旋转鼠标键盘可控旋转方向理解与暧昧关系好吧，变换，不过如此的属性在前端开发中，我经常碰到一些不能马上理解的css属性，于是打算以后但凡碰到这些微妙又模糊的属性，都归纳到这里。 CSS打印页面中的 orphans和widows ...

gotham 2019-08-28 18:20 评论0 收藏0
CSS动画之旋转魔方轮播

摘要：关于的详细讲解张鑫旭一个基本的立方体就需要结合以上三点属性来实现。写完这篇文章后确实感觉自己对方面的知识又熟悉了不少但是前端的主力还是月份又得继续深入学习方面的知识嘞本文参考内容关于的详细讲解张鑫旭详解彻底理解和的区别的原始出处很久没有回头来复习CSS方面的知识了, 正好又到了月底写文章的deadline......所以这次选择了详细巩固一下CSS3动画有关的知识点,因为之前只是用过...

leone 2019-08-29 15:10 评论0 收藏0
CSS动画之旋转魔方轮播

摘要：关于的详细讲解张鑫旭一个基本的立方体就需要结合以上三点属性来实现。写完这篇文章后确实感觉自己对方面的知识又熟悉了不少但是前端的主力还是月份又得继续深入学习方面的知识嘞本文参考内容关于的详细讲解张鑫旭详解彻底理解和的区别的原始出处很久没有回头来复习CSS方面的知识了, 正好又到了月底写文章的deadline......所以这次选择了详细巩固一下CSS3动画有关的知识点,因为之前只是用过...

LittleLiByte 2019-08-02 10:18 评论0 收藏0
CSS 3D Panorama（全景） - 淘宝造物节技术剖析

摘要：淘宝造物节的活动页就是全景的一个很赞的页面，它将全景图分割成等份，相邻的元素构成的夹角，相邻两侧面相对于棱柱中心所构成的夹角。本文转自凹凸实验室：https://aotu.io/notes/2016/08... showImg(https://segmentfault.com/img/remote/1460000011381045); 前言 3D 全景并不是什么新鲜事物了，但以前...

LiuRhoRamen 2019-08-29 11:16 评论0 收藏0
CSS 3D Panorama（全景） - 淘宝造物节技术剖析

摘要：淘宝造物节的活动页就是全景的一个很赞的页面，它将全景图分割成等份，相邻的元素构成的夹角，相邻两侧面相对于棱柱中心所构成的夹角。本文转自凹凸实验室：https://aotu.io/notes/2016/08... showImg(https://segmentfault.com/img/remote/1460000011381045); 前言 3D 全景并不是什么新鲜事物了，但以前...

lentrue 2019-08-05 10:08 评论0 收藏0