css3 立方体动画

最新推荐文章于 2020-09-13 16:29:35 发布

「已注销」

最新推荐文章于 2020-09-13 16:29:35 发布

阅读量1w

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css3 立方体动画旋转

本文链接：https://blog.youkuaiyun.com/q1424966670/article/details/84974696

css 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的3D立方体广告轮播动画，立方体由两个不同大小的立方体组成，每个面都显示不同的图片。立方体会根据预设的动画效果旋转，并在鼠标悬停时改变旋转距离，提供交互体验。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cube_3D</title>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        width: 320px;
        height: 270px;
        background-color: #ccc;
        position: relative;
    }
    .container .box{
        margin: auto;
        position: absolute;
        width: 1px;
        height: 1px;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: red;
        transform-style: preserve-3d;
    }
    @keyframes an1{
        0%{
            transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
        }
        25%{
            transform: rotateY(180deg) rotateX(45deg) rotateZ(0deg);
        }
        50%{
            transform: rotateY(360deg) rotateX(45deg) rotateZ(0deg);
        }
        75%{
            transform: rotateY(270deg) rotateX(270deg) rotateZ(270deg);
        }
        100%{
            transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);
        }
    }
    .container .box .cube_1{
        list-style: none;
        width: 200px;
        height: 200px;
        margin: -100px -100px;
        position: absolute;
        perspective: 4000px;
        transform-style: preserve-3d;
        animation: an1 10s linear 0s infinite;
    }
    .container .box .cube_1 li{
        position: absolute;
        width: 200px;
        height: 200px;
        opacity: 0.5;
        transition: transform .2s ease-in 0s;
    }
    .container .box .cube_1 li img{
        width: 200px;
        height: 200px;
    }
    .container .box .cube_1 li:nth-child(1){
        transform: rotateY(0deg) translateZ(100px);
        transition: all 1s ease-in 0;
    }
    .container .box .cube_1 li:nth-child(2){
        transform: rotateY(90deg) translateZ(100px);
    }
    .container .box .cube_1 li:nth-child(3){
        transform: rotateY(180deg) translateZ(100px);
    }
    .container .box .cube_1 li:nth-child(4){
        transform: rotateY(270deg) translateZ(100px);
    }
    .container .box .cube_1 li:nth-child(5){
        transform: rotateX(90deg) translateZ(100px);
    }
    .container .box .cube_1 li:nth-child(6){
        transform: rotateX(-90deg) translateZ(100px);
    }
    
    .container .box .cube_2{
        list-style: none;
        width: 100px;
        height: 100px;
        position: absolute;
        margin: -50px -50px;
        perspective: 4000px;
        transform-style: preserve-3d;
        animation: an1 10s linear 0s infinite;
    }
    .container .box .cube_2 li{
        position: absolute;
        width: 100px;
        height: 100px;
    }
    .container .box .cube_2 li img{
        width: 100px;
        height: 100px;
    }
    .container .box .cube_2 li:nth-child(1){
        transform: rotateY(0deg) translateZ(50px);
    }
    .container .box .cube_2 li:nth-child(2){
        transform: rotateY(90deg) translateZ(50px);
    }
    .container .box .cube_2 li:nth-child(3){
        transform: rotateY(180deg) translateZ(50px);
    }
    .container .box .cube_2 li:nth-child(4){
        transform: rotateY(270deg) translateZ(50px);
    }
    .container .box .cube_2 li:nth-child(5){
        transform: rotateX(90deg) translateZ(50px);
    }
    .container .box .cube_2 li:nth-child(6){
        transform: rotateX(-90deg) translateZ(50px);
    }

    .container .box:hover .cube_1 li:nth-child(1){
        transform: rotateY(0deg) translateZ(200px);
    }
    .container .box:hover .cube_1 li:nth-child(2){
        transform: rotateY(90deg) translateZ(200px);
    }
    .container .box:hover .cube_1 li:nth-child(3){
        transform: rotateY(180deg) translateZ(200px);
    }
    .container .box:hover .cube_1 li:nth-child(4){
        transform: rotateY(270deg) translateZ(200px);
    }
    .container .box:hover .cube_1 li:nth-child(5){
        transform: rotateX(90deg) translateZ(200px);
    }
    .container .box:hover .cube_1 li:nth-child(6){
        transform: rotateX(-90deg) translateZ(200px);
    }
</style>
<body>
    <div id="ad" class="container">
        <div class="box">
            <ul class="cube_1">
                <li><img src="img/1.jpg"></li>
                <li><img src="img/2.jpg"></li>
                <li><img src="img/3.jpg"></li>
                <li><img src="img/4.jpg"></li>
                <li><img src="img/5.jpg"></li>
                <li><img src="img/6.jpg"></li>
            </ul>
            <ul class="cube_2">
                <li><img src="img/7.jpg"></li>
                <li><img src="img/8.jpg"></li>
                <li><img src="img/9.jpg"></li>
                <li><img src="img/10.jpg"></li>
                <li><img src="img/11.jpg"></li>
                <li><img src="img/12.jpg"></li>
            </ul>
        </div>
    </div>
</body>
<script type="text/javascript">
	var ad=document.getElementById("ad");
	//定义横纵坐标
	var x=0;	var y=0;
	//设置初始速度
	var xv=5;	var yv=5;
	//根据img横纵坐标位置，设置反方向速度
	function fun(){
		if(x<0||x>window.innerWidth-ad.offsetWidth){
			xv=-xv;
		}
		if(y<0||y>window.innerHeight-ad.offsetHeight){
			yv=-yv;
		}
		x+=xv;y+=yv;
		//将xy坐标值赋予img css样式中的left与top
		ad.style.left=x+"px";ad.style.top=y+"px";
	}
	// for (let i = 0; i < 100000; i++) {
	// 	var mytime=setInterval(fun,10);
	// }
	//定时器调用
	var mytime=setInterval(fun,30);
	ad绑定鼠标悬停事件
	ad.onmouseover=function(){
		//清除定时器
		clearInterval(mytime);
	}
	//鼠标离开，重新触发定时器
	ad.onmouseout=function(){
		mytime=setInterval(fun,100);
	}
</script>
</html>