master

分支 (1)

管理

管理

master

front-end-method-tool-set
/
521.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
    margin: 0;
    padding: 0;
}
:root{
    height: 100%;
}
body {
    height: 100%;
    perspective: 3000px;
}
.father {
    width: 200px;
    height: 250px;
    position: absolute;
    top: calc(50% - 150px);
    left: calc(50% - 150px);
    transform-style: preserve-3d;
    animation: run 25s linear infinite;
}

@keyframes run {

    0%{
        transform: rotateY(0deg);
    }

    100%{
        transform: rotateY(360deg);
    }
}
.father>div{
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: cover;
}
.son1{


    background-image: url(image/1.jpg);
    transform: rotateY(45deg) translateZ(400px);
}
.son2{

    background-image: url(image/1.jpg);
    transform: rotateY(90deg) translateZ(400px);
}
.son3{


    background-image: url(image/1.jpg);
    transform: rotateY(135deg) translateZ(400px);
}
.son4{


    background-image: url(image/1.jpg);
    transform: rotateY(180deg) translateZ(400px);
}
.son5{


    background-image: url(image/1.jpg);
    transform: rotateY(225deg) translateZ(400px);
}
.son6{


    background-image: url(image/1.jpg);
    transform: rotateY(270deg) translateZ(400px);
}
.son7{


    background-image: url(image/1.jpg);
    transform: rotateY(315deg) translateZ(400px);
}
.son8{

    background-image: url(image/1.jpg);
    transform: rotateY(360deg) translateZ(400px);
}
    </style>
</head>
<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
        <div class="son4"></div>
        <div class="son5"></div>
        <div class="son6"></div>
        <div class="son7"></div>
        <div class="son8"></div>
    </div>
</body>
</html>

<!--

perspective
transform-style: preserve-3d;
animation: run 18s linear infinite;
transform


 -->