zoukankan html css js c++ java

css+html实现3D照片墙

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>3dPhoto</title>
<style type="text/css">
        * {
    margin: 0;
    padding: 0;
}

body {
    background: url(../img/wbg.png);
}


.box {
    width: 320px;
    height: 200px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform-style: preserve-3d;
    animation: im 20s linear infinite;
}

.box img {
    width: 100%;
    height: 100%;
    position: absolute;
}

@keyframes im{
    0% {
        transform: rotateY(0deg) rotateX(10deg);
    }

    25% {
        transform: rotateY(90deg) rotateX(-10deg);
    }

    50% {
        transform: rotateY(180deg) rotateX(10deg);
    }

    75% {
        transform: rotateY(270deg) rotateX(-10deg);
    }

    100% {
        transform: rotateY(360deg) rotateX(10deg);
    }

}

/*10张图片3d变换*/
.box img:nth-child(1) {
    transform: rotateY(0deg) translateZ(600px);
    backface-visibility: visible;
}

.box img:nth-child(2) {
    transform: rotateY(36deg) translateZ(600px);
    backface-visibility: visible;
}

.box img:nth-child(3) {
    transform: rotateY(72deg) translateZ(600px);
    backface-visibility: visible;
}

.box img:nth-child(4) {
    transform: rotateY(108deg) translateZ(600px);
    backface-visibility: visible;
}

.box img:nth-child(5) {
    transform: rotateY(144deg) translateZ(600px);
    backface-visibility: visible;
}

.box img:nth-child(6) {
    transform: rotateY(180deg) translateZ(600px);
    backface-visibility: visible;
}

.box img:nth-child(7) {
    transform: rotateY(216deg) translateZ(600px);
    backface-visibility:visible;
}

.box img:nth-child(8) {
    transform: rotateY(252deg) translateZ(600px);
    backface-visibility: visible;
}

.box img:nth-child(9) {
    transform: rotateY(288deg) translateZ(600px);
    backface-visibility: visible;
}

.box img:nth-child(10) {
    transform: rotateY(324deg) translateZ(600px);
    backface-visibility: visible;
}

        </style>
    </head>
    <body>
        <div class="show">
            <div class="box">
                <img src="./../../正面.jpg" >
                <img src="./../../反面.jpg" >
                <img src="./../../xuanjiezhimou.jpg" >
                <img src="./../../码上说故事_690.jpeg" >
                <img src="./../../1.jpg" >
                <img src="./../../正面.jpg" >
                <img src="./../../反面.jpg" >
                <img src="./../../xuanjiezhimou.jpg" >
                <img src="./../../码上说故事_690.jpeg" >
                <img src="./../../1.jpg" >
            </div>
        </div>
    </body>
</html>

View Code

————————————————
版权声明：本文为CSDN博主「一殿」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41866776/article/details/96695938

查看全文

相关阅读:
Could A New Linux Base For Tablets/Smartphones Succeed In 2017?
使用libhybris，glibc和bionic共存时的TLS冲突的问题
 6 Open Source Mobile OS Alternatives To Android in 2018
Using MultiROM
GPU drivers are written by the GPU IP vendors and they only provide Android drivers
Jolla Brings Wayland Atop Android GPU Drivers
How to Use Libhybris and Android GPU Libraries with Mer (Linux) on the Cubieboard
闲聊Libhybris
【ARM-Linux开发】wayland和weston的介绍
 Wayland and X.org problem : Why not following the Android Solution ?

原文地址：https://www.cnblogs.com/ciscolee/p/12386757.html