CSS实现简单的3D旋转魔方

最新推荐文章于 2022-05-25 10:33:44 发布

IT-Xu_LongTeng

最新推荐文章于 2022-05-25 10:33:44 发布

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/weixin_44269204/article/details/89052521

版权

本文详细介绍了如何利用CSS3的transform属性和perspective属性，结合多个div元素，构建一个可以进行多面旋转的3D魔方效果。通过调整不同的旋转角度，实现了魔方各面的动态转换，展示了CSS在3D视觉设计中的强大能力。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		body{
			background: yellow;
		}
		/*最外层样式*/
			.wrap{
				width: 200px;
				height 200px;
				margin: 200px auto;
				/*border: 1px solid red;*/
				/*background: red;*/
				position: relative;					
			}
			/*包裹所有容器的样式*/
			.cube{
				width: 200px;
				height: 200px;
				/*perspective: 500px;*/
				/*保持3D效果*/
				margin: 0 auto;
				transform-style: preserve-3d;
				transform: rotateX(-30deg) rotateY(-80deg);	
				animation: rotate linear 10s infinite;	
							
			}
				@-webkit-keyframes rotate{
				from{
					transform: rotateX(0deg) rotateY(0deg);
				}
				to{
					transform: rotateX(360deg) rotateY(360deg);
				}
			}
			.cube div{
				position: absolute;
				width: 200px;
				height: 200px;
				/*opacity: 0.8;*/
				/*0.4秒*/
				transition: all .4; 
			}
			/*定义所有图片的样式*/
			.pic{
				width: 200px;
				height: 200px;				
			}

最低0.47元/天解锁文章

IT-Xu_LongTeng

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
CSS实现简单的3D旋转魔方

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> body{ background: yellow; } /*最外层样式*/ .wrap{ width: 200px;...
复制链接

扫一扫