html – CSS多维数据集中的RotateX无法正常工作
发布时间:2020-12-14 23:28:36 所属栏目:资源 来源:网络整理
导读:我正在学习创建立方体旋转效果.在悬停时,如果我通过rotateY替换rotateX,则立方体围绕Y轴旋转居中.但是当存在rotateX时,立方体不会围绕X轴居中旋转.如何实现立方体的正确旋转? #container { perspective: 1000px; perspective-origin: 0 0;}#cube { position
我正在学习创建立方体旋转效果.在悬停时,如果我通过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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |