CSS 3D音乐相册（带悬停打开动画）

css, 3d, photo

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2482
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html {
    background: linear-gradient(#FF6666 0%, #336699 20%);
    /*背景渐变颜色*/
    
    height: 100%;
    color: #99cc33;
    /*文字颜色*/
}
/*最外层容器样式*/

.wrap {
    width: 200px;
    height: 200px;
    /*改变左右上下,图片方块移动*/
    
    margin: 150px auto;
    position: relative;
}
/*包裹所有容器样式*/

.cube {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(-80deg);
    -webkit-animation: rotate 20s infinite;
    /*匀速*/
    
    animation-timing-function: linear;
}
@-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;
    transition: all .4s;
}
/*定义所有图片样式*/

.pic {
    width: 200px;
    height: 200px;
}
.cube .out_front {
    transform: rotateY(0deg) translateZ(100px);
}
.cube .out_back {
    transform: translateZ(-100px) rotateY(180deg);
}
.cube .out_left {
    transform: rotateY(90deg) translateZ(100px);
}
.cube .out_right {
    transform: rotateY(-90deg) translateZ(100px);
}
.cube .out_top {
    transform: rotateX(90deg) translateZ(100px);
}
.cube .out_bottom {
    transform: rotateX(-90deg) translateZ(100px);
}
/*定义小正方体样式
*/

.cube span {
    display: bloack;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50px;
    left: 50px;
}
.cube .in_pic {
    width: 100px;
    height: 100px;
}
.cube .in_front {
    transform: rotateY(0deg) translateZ(50px);
}
.cube .in_back {
    transform: translateZ(-50px) rotateY(180deg);
}
.cube .in_left {
    transform: rotateY(90deg) translateZ(50px);
}
.cube .in_right {
    transform: rotateY(-90deg) translateZ(50px);
}
.cube .in_top {
    transform: rotateX(90deg) translateZ(50px);
}
.cube .in_bottom {
    transform: rotateX(-90deg) translateZ(50px);
}
/*鼠标移入后样式*/

.cube:hover .out_front {
    transform: rotateY(0deg) translateZ(200px);
}
.cube:hover .out_back {
    transform: translateZ(-200px) rotateY(180deg);
}
.cube:hover .out_left {
    transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .out_right {
    transform: rotateY(-90deg) translateZ(200px);
}
.cube:hover .out_top {
    transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .out_bottom {
    transform: rotateX(-90deg) translateZ(200px);
}
.hovertreeinfo {
    text-align: center;
}
.hovertreeinfo a {
    color: white
}

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>css-3d旋转相册</title>
    <link rel="stylesheet" href="css/hovertree.css" />
</head>

<body>

<audio loop src="https://www.joy127.com/url/4075.mp3" id="audio" autoplay preload="auto">该浏览器不支持audio属性</audio>
    <script type="text/javascript">
        //--创建页面监听，等待微信端页面加载完毕 触发音频播放
        document.addEventListener('DOMContentLoaded', function() {
            function audioAutoPlay() {
                var audio = document.getElementById('audio');
                audio.play();
                document.addEventListener("WeixinJSBridgeReady", function() {
                    audio.play();
                }, false);
            }
            audioAutoPlay();
        });
        //--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放
        document.addEventListener('touchstart', function() {
            function audioAutoPlay() {
                var audio = document.getElementById('audio');
                audio.play();
            }
            audioAutoPlay();
        });
    </script>

<div class="wrap">
        
        <div class="cube">
            
            <div class="out_front">
                <img src="/uploads/1706/girls/1.jpg " class="pic" />
            </div>
            
            <div class="out_back">
                <img src="/uploads/1706/girls/2.jpg" class="pic" />
            </div>
            
            <div class="out_left">
                <img src="/uploads/1706/girls/3.jpg" class="pic" />
            </div>
            <div class="out_right">
                <img src="/uploads/1706/girls/4.jpg" class="pic" />
            </div>
            <div class="out_top">
                <img src="/uploads/1706/girls/1.jpg" class="pic" />
            </div>
            <div class="out_bottom">
                <img src="/uploads/1706/girls/3.jpg" class="pic" />
            </div>
            
            <span class="in_front">
					<img src="/uploads/user_upload/43311/1-1Q206143U7.jpg" class="in_pic" />
				</span>
            <span class="in_back">
					<img src="/uploads/user_upload/43311/1-1Q206143U7-52.jpg" class="in_pic" />
				</span>
            <span class="in_left">
					<img src="/uploads/user_upload/43311/1-1Q206143U7-51.jpg" class="in_pic" />
				</span>
            <span class="in_right">
					<img src="/uploads/user_upload/43311/1-1Q206143U7-50.jpg" class="in_pic" />
				</span>
            <span class="in_top">
					<img src="/uploads/user_upload/43311/1-1Q206143U6-50.jpg" class="in_pic" />
				</span>
            <span class="in_bottom">
					<img src="/uploads/user_upload/43311/1-1Q206143U5.jpg" class="in_pic" />
				</span>
        </div>
    </div>

</body>

</html>

css, 3d, photo

编辑器支持Emmet

快捷键

css, 3d, photo

使用CSS3 mask（蒙版，遮罩）属性实现超酷按钮悬停动画

完整版的CSS太阳系运行动画（带鼠标悬停提示）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：