css33D盒子动画（盒子套盒子）

最新推荐文章于 2024-03-16 17:12:38 发布

ssh6666

最新推荐文章于 2024-03-16 17:12:38 发布

阅读量885

点赞数

文章标签： css css3

本文链接：https://blog.youkuaiyun.com/ssh6666/article/details/104889442

版权

本文介绍如何创建CSS3的3D盒子动画，包括利用transform-translate和transform-rotate实现不同轴上的动画效果，以及根据需求选择使用translate3d()的方法。

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

升级版盒子动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
   margin: 0;padding: 0;}
			body{
   
			    /*设置3d的环境*/
			    transform-style: preserve-3d;
			   perspective: 1400px;
			}
			.box{
   
				height: 300px;
				width: 300px;
				background:rgba(0,0,100,0.5);
				position: absolute;
				top: 180px;
				left:50% ;
				margin-left:-150px;
				transform: rotateY(60deg);
				transform-style: preserve-3d;
				transition:4s;
				animation:move1 3s linear infinite;
			}
			
			/* .box:hover{
   
			    transform:rotateY(360deg);
			}
			.box:hover div:nth-child(1){
   
			    transform:rotateX(250deg);
			     transition:1s;
			} */
			.box div:nth-child(1){
   
			    animation:move2 5s  linear infinite;
			}
			@keyframes move1{
   
			    0%{
   transform: