zoukankan html css js c++ java

纯css3图片旋转展示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background: lightblue;
}
div.box{
/*position: absolute;*/
200px;
height: 300px;
/*left: 600px;
top: 100px;*/
margin: 100px auto;

transform-style: preserve-3d;

animation: rotateit 10s linear infinite;
}
.box div{
200px;
height: 300px;
position: absolute;
border: 2px solid lightcoral;
top: 0;
left: 0;
background: url(img/test.jpg);
background-size: 100% 100%;
}
/*先转然后移出*/
.box div:nth-child(1){
transform: rotateY(30deg) translateZ(400px);
}
.box div:nth-child(2){
transform: rotateY(60deg) translateZ(500px);
}
.box div:nth-child(3){
transform: rotateY(90deg) translateZ(400px);
}
.box div:nth-child(4){
transform: rotateY(120deg) translateZ(500px);
}

.box div:nth-child(5){
transform: rotateY(150deg) translateZ(400px);
}
.box div:nth-child(6){
transform: rotateY(180deg) translateZ(500px);
}
.box div:nth-child(7){
transform: rotateY(210deg) translateZ(400px);
}
.box div:nth-child(8){
transform: rotateY(240deg) translateZ(500px);
}

.box div:nth-child(9){
transform: rotateY(270deg) translateZ(400px);
}
.box div:nth-child(10){
transform: rotateY(300deg) translateZ(500px);
}
.box div:nth-child(11){
transform: rotateY(330deg) translateZ(400px);
}
.box div:nth-child(12){
transform: rotateY(360deg) translateZ(500px);
}

.box div:hover{
transform: rotateY(360deg) translateZ(600px);
/*transform: rotateY(360deg);*/
800px;
height: 1200px;
position: absolute;
top: -200px;
/*left: -600px;*/
/*margin: 100px auto;*/
animation: move 10s linear infinite;
}

@keyframes rotateit{
0%{
transform: rotateX(5deg) rotateY(0deg);
}
50%{
transform: rotateX(-5deg) rotateY(180deg);
}
100%{
transform: rotateX(5deg) rotateY(360deg);
}
}
/*@keyframes move{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(360deg);
}
}*/
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{
                background: lightblue;
            }
            div.box{
                /*position: absolute;*/
                width: 200px;
                height: 300px;
                /*left: 600px;
                top: 100px;*/
                margin: 100px auto;
                
                transform-style: preserve-3d;
                
                animation: rotateit 10s linear infinite;
            }
            .box div{
                width: 200px;
                height: 300px;
                position: absolute;
                border: 2px solid lightcoral;
                top: 0;
                left: 0;
                background: url(img/test.jpg);
                background-size: 100% 100%;
            }
            /*先转然后移出*/
            .box div:nth-child(1){
                transform: rotateY(30deg) translateZ(400px);
            }
            .box div:nth-child(2){
                transform: rotateY(60deg) translateZ(500px);
            }
            .box div:nth-child(3){
                transform: rotateY(90deg) translateZ(400px);
            }
            .box div:nth-child(4){
                transform: rotateY(120deg) translateZ(500px);
            }
            
            
            .box div:nth-child(5){
                transform: rotateY(150deg) translateZ(400px);
            }
            .box div:nth-child(6){
                transform: rotateY(180deg) translateZ(500px);
            }
            .box div:nth-child(7){
                transform: rotateY(210deg) translateZ(400px);
            }
            .box div:nth-child(8){
                transform: rotateY(240deg) translateZ(500px);
            }
            
            .box div:nth-child(9){
                transform: rotateY(270deg) translateZ(400px);
            }
            .box div:nth-child(10){
                transform: rotateY(300deg) translateZ(500px);
            }
            .box div:nth-child(11){
                transform: rotateY(330deg) translateZ(400px);
            }
            .box div:nth-child(12){
                transform: rotateY(360deg) translateZ(500px);
            }
            
            .box div:hover{
                transform: rotateY(360deg) translateZ(600px);
                /*transform: rotateY(360deg);*/
                width: 800px;
                height: 1200px;
                position: absolute;
                top: -200px;
                /*left: -600px;*/
                /*margin: 100px auto;*/
                animation: move 10s linear infinite;
            }
            
            
            @keyframes rotateit{
                0%{
                    transform: rotateX(5deg) rotateY(0deg);
                }
                50%{
                    transform: rotateX(-5deg) rotateY(180deg);
                }
                100%{
                    transform: rotateX(5deg) rotateY(360deg);
                }
            }
            /*@keyframes move{
                from{
                    transform: rotateY(0deg);
                }
                to{
                    transform: rotateY(360deg);
                }
            }*/
        </style>
    </head>
    <body>
        <div class="box">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </body>
</html>

查看全文

相关阅读:
OpenStack 企业私有云的若干需求（5）：主流硬件支持、云快速交付和 SLA 保证
 OpenStack 企业私有云的若干需求（4）：混合云支持 (Hybrid Cloud Support)
超千个节点OpenStack私有云案例（1）：CERN 5000+ 计算节点私有云
 OpenStack 企业私有云的若干需求（3）：多租户和租户间隔离(multi-tenancy and isolation)
理解 Linux 网络栈（3）：QEMU/KVM + VxLAN 环境下的 Segmentation Offloading 技术（发送端）
理解 Linux 网络栈（2）：非虚拟化Linux 环境中的 Segmentation Offloading 技术
 理解 Linux 网络栈（1）：Linux 网络协议栈简单总结
 矩阵连乘最优结合动态规划求解
 不用中间变量交换两个数 swap(a,b);
java中String、StringBuffer、StringBuilder的区别

原文地址：https://www.cnblogs.com/rlann/p/6184538.html