html – CSS多维数据集中的RotateX无法正常工作_html-js-css

概述我正在学习创建立方体旋转效果.在悬停时,如果我通过rotateY替换rotateX,则立方体围绕Y轴旋转居中.但是当存在rotateX时,立方体不会围绕X轴居中旋转.如何实现立方体的正确旋转？ #container { perspective: 1000px; perspective-origin: 0 0;}#cube { position: relative; top: 1 我正在学习创建立方体旋转效果.在悬停时,如果我通过rotateY替换rotateX,则立方体围绕Y轴旋转居中.但是当存在rotateX时,立方体不会围绕X轴居中旋转.如何实现立方体的正确旋转？

#container {  perspective: 1000px;  perspective-origin: 0 0;}#cube {  position: relative;  top: 100px;  left: 100px;  wIDth: 200px;  transform-style: preserve-3d;  Transition: transform 2s;  transform-origin: 50% 50%;}#cube div {  position: absolute;  wIDth: 200px;  height: 200px;}#front {  transform: rotateY(   0deg ) translateZ( 100px );  background-color: rgba(0,34,62,0.3);}#right {  transform: rotateY(  90deg ) translateZ( 100px );  background-color: rgba(110,162,0.3);}#back {  transform: rotateY( 180deg ) translateZ( 100px );  background-color: rgba(20,4,0.3);}#left {  transform: rotateY( -90deg ) translateZ( 100px );  background-color: rgba(80,134,2,0.3);}#top {  transform: rotateX(90deg) translateZ(100px);}#bottom {  transform: rotateX(-90deg) translateZ(100px);}#cube:hover {  transform: rotateX(360deg);}

<HTML>  <body>    <div ID="container">      <div ID="cube">        <div ID="front">          <h1>1</h1>        </div>        <div ID="right">          <h1>2</h1>        </div>        <div ID="back">          <h1>3</h1>        </div>        <div ID="left">          <h1>4</h1>        </div>        <div ID="top">          <h1>5</h1>        </div>        <div ID="bottom">          <h1>6</h1>        </div>      </div>    </div>  </body></HTML>

解决方法如果我理解正确,你只需将#cube的高度设置为200px

#container {  perspective: 1000px;  perspective-origin: 0 0;}#cube {  position: relative;  top: 100px;  left: 100px;  wIDth: 200px;  height:200px;  transform-style: preserve-3d;  Transition: transform 2s;  transform-origin: 50% 50%;}#cube div {  position: absolute;  wIDth: 200px;  height: 200px;}#front {  transform: rotateY(   0deg ) translateZ( 100px );  background-color: rgba(0,0.3);}#top {  transform: rotateX(90deg) translateZ(100px);}#bottom {  transform: rotateX(-90deg) translateZ(100px);}#cube:hover {  transform: rotateX(360deg);}

<HTML>  <body>    <div ID="container">      <div ID="cube">        <div ID="front">          <h1>1</h1>        </div>        <div ID="right">          <h1>2</h1>        </div>        <div ID="back">          <h1>3</h1>        </div>        <div ID="left">          <h1>4</h1>        </div>        <div ID="top">          <h1>5</h1>        </div>        <div ID="bottom">          <h1>6</h1>        </div>      </div>    </div>  </body></HTML>

总结

以上是内存溢出为你收集整理的html – CSS多维数据集中的RotateX无法正常工作全部内容，希望文章能够帮你解决html – CSS多维数据集中的RotateX无法正常工作所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1128057.html

html – CSS多维数据集中的RotateX无法正常工作

发表评论

评论列表（0条）