3D旋转相册html+css代码分享

3D旋转相册html+css代码分享

首先看效果:

3D旋转相册html+css代码分享_第1张图片
html代码:

Doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>3d旋转相册title>
        <link rel="stylesheet" href="demo.css">
    head>
    <body>
        
        <div id="wrap">
        
        <span id="in-front"><img src="img/1.jpg">span>
        <span id="in-left"><img src="img/2.jpg">span>
        <span id="in-right"><img src="img/3.jpg">span>
        <span id="in-back"><img src="img/4.jpg">span>
        <span id="in-top"><img src="img/5.jpg">span>
        <span id="in-bottom"><img src="img/6.jpg">span>
        
        <div id="out-front"><img src="img/7.jpg">div>
        <div id="out-left"><img src="img/8.jpg">div>
        <div id="out-right"><img src="img/9.jpg">div>
        <div id="out-back"><img src="img/10.jpg">div>
        <div id="out-top"><img src="img/11.jpg">div>
        <div id="out-bottom"><img src="img/12.jpg">div>
        div>
    body>
html>

CSS代码:

body{
    background: url("img/13.jpg") no-repeat center center fixed;
                -webkit-background-size: cover;
                -o-background-size: cover;                
                background-size: cover;
}
#wrap span{
    display: block;
    width:100px;
    height:100px;
    background-color: rgb(10, 118, 212);
    position: absolute;
    top:50px;
    left:50px;
}

#wrap{
    width: 100px;
    height:100px;
    margin:300px auto;
    animation: rotate 20s infinite;
    transform-style:preserve-3d ;
}

#wrap span img{
    width:100px;
    height:100px;
}

#in-front{
    transform: translateZ(50px);
}

#in-back{
    transform: translateZ(-50px);
}

#in-left{
    transform: rotateY(90deg)  translateZ(50px);
}

#in-right{
    transform:  rotateY(-90deg) translateZ(50px);
}

#in-top{
    transform:   rotateX(90deg) translateZ(50px);
}

#in-bottom{
    transform:  rotateX(-90deg) translateZ(50px);
}

@keyframes rotate{
    from{
        transform: rotateX(0deg)  rotateY(0deg);
    }
    to{
        transform: rotateX(360deg) rotateY(360deg);
    }
}

#wrap div{
    width:200px;
    height:200px;
    background-color: brown;
    position: absolute;
}
#wrap div img{
    width:200px;
    height:200px;
}

#out-front{
    transform: translateZ(100px);
}

#out-back{
    transform: translateZ(-100px);
}

#out-left{
    transform: rotateY(90deg)  translateZ(100px);
}

#out-right{
    transform:  rotateY(-90deg) translateZ(100px);
}

#out-top{
    transform:   rotateX(90deg) translateZ(100px);
}

#out-bottom{
    transform:  rotateX(-90deg) translateZ(100px);
}

#wrap:hover #out-front{
    transform: translateZ(150px);
}

#wrap:hover #out-left{
    transform: rotateY(90deg)  translateZ(150px);
}

#wrap:hover #out-right{
    transform:  rotateY(-90deg) translateZ(150px);
}

#wrap:hover #out-back{
    transform: translateZ(-150px);
}

#wrap:hover #out-top{
    transform:   rotateX(90deg) translateZ(150px);
}
#wrap:hover #out-bottom{
    transform:  rotateX(-90deg) translateZ(150px);
}

代码直接粘贴复制即可,图片可以自行选取,昨天是我一个好朋友的生日,本来想给她敲一个比较好看的特效的,但是无奈前端水平不够短时间内根本敲不出来,书到用时方恨少啊……从今天开始再学习前端吧!加油

你可能感兴趣的:(html5,css)