利用css3实现3D立方体旋转

最新推荐文章于 2022-10-11 10:13:03 发布

CodeEvil

最新推荐文章于 2022-10-11 10:13:03 发布

阅读量684

点赞数

分类专栏： css3 文章标签： css3 3d变换

本文链接：https://blog.youkuaiyun.com/m0_37907835/article/details/80346634

版权

本文介绍了一种利用CSS3实现3D立方体旋转的方法，通过先旋转再平移各个面，无需设置变换中心transform-origin，详细阐述了这一实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
	<title>cssBox</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		#stage{	/*舞台元素，该元素作为舞台，不用进行3d操作，舞台内部的元素需设置为3d元素，包括容器和容器内的元素*/
			position: relative;
			height: 800px;
			background-color: #D4D4D4;
			perspective: 3500px;	/*使得舞台子元素变为透视元素， 即遵循近大远小，参考WebGL的透视相机*/
			perspective-origin: 0 0;	/*设置相机相对舞台的位置， 这里设置未左上角，个人理解是相机发射垂直射线到stage形成的点在左上角*/
		}
		#container{
			width: 500px;
			height: 500px;
			position: absolute;
			/*使得容器居中放置*/
			margin-left: calc(50% - 250px);
			margin-top: 150px;
			transition: all ease-in-out 1s;
			/*这步操作很关键，给容器加入3d效果，这时候容器内部的元素（即容器子元素）,形成3d关系，若无此操作，经过3d变换，空间是乱的*/
			transform-style: preserve-3d;
			/*设置容器进行3d变换的中心点，即WebGL里的物体中心点，所有变换的会围绕改点进行，尤其是旋转最为明显，这里设置的点的位置刚好在正方体的最中心*/
			transform-origin: ce

最低0.47元/天解锁文章