3D几何体旋转

落日映苍穹つ 2021-09-15 08:56 445阅读 0赞

css动画中，transform与transition动画常常可以设置3D动画，以下例子是3D旋转的具体代码，希望对大家有帮助。。。。。。

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>3D几何体</title>
    		<style type="text/css">
    			.out {
    				width: 300px;
    				height: 300px;
    				margin: 100px auto;
    				position: relative;
    				/*perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。注释：perspective 属性只影响 3D 转换元素。*/
    				perspective: 1200px;
    			}
    			/*定义盒子包含框样式*/
    			
    			.wrapper {
    				/*transform--style属性指定嵌套元素是怎样在三维空间中呈现。注意： 使用此属性必须先使用 transform 属性.*/
    				transform-style: preserve-3d;
    			}
    			/*定义六个面的公共样式*/
    			
    			.wall {
    				background: rgba(255, 0, 0, 0.5);
    				border: 1px solid black;
    				font-size: 30px;
    				font-weight: bold;
    				color: #FFFFFF;
    				text-align: center;
    				height: 200px;
    				line-height: 200px;
    				width: 200px;
    				position: absolute;
    				text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    			}
    			/*定义每个面样式*/
    			.front {
    				transform: translateZ(100px);
    			}
    			
    			.back {
    				transform: rotateX(180deg) translateZ(100px);
    			}
    			
    			.left {
    				transform: rotateY(-90deg) translateZ(100px);
    			}
    			
    			.right {
    				transform: rotateY(90deg) translateZ(100px);
    			}
    			
    			.top {
    				transform: rotateX(90deg) translateZ(100px);
    			}
    			
    			.bottom {
    				transform: rotateX(-90deg) translateZ(100px);
    			}
    			/*定义关键帧动画*/
    			
    			@keyframes abc {
    				from {
    					transform: rotateY(0deg);
    				}
    				to {
    					transform: rotateY(360deg);
    				}
    			}
    			/*鼠标移入后执行动画*/
    			.wrapper:hover {
    				animation: abc 3s linear infinite;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div class="out">
    			<div class="wrapper">
    				<div class="wall front">front</div>
    				<div class="wall back">back</div>
    				<div class="wall left">left</div>
    				<div class="wall right">right</div>
    				<div class="wall top">top</div>
    				<div class="wall bottom">bottom</div>
    			</div>
    		</div>
    	</body>
    
    </html>

效果如下：

![20180503083011549][]

[20180503083011549]: /images/20210802/ca57b861873f4c02b57c74fc422c3187.png