3d旋转

最新推荐文章于 2023-01-29 17:15:59 发布

檬了个柠

最新推荐文章于 2023-01-29 17:15:59 发布

阅读量110

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/lemonnomel1/article/details/119010967

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

3d旋转

先准备6张图片

<!DOCTYPE html>
<html>    <head>        <meta charset="utf-8">        <link rel="stylesheet" href="./index.css">        <title></title>    </head>    <body>        <div class="xuanz">            <div><img src="./img/001.png" alt=""></div>            <div><img src="./img/002.png" alt=""></div>            <div><img src="./img/003.png" alt=""></div>            <div><img src="./img/004.png" alt=""></div>            <div><img src="./img/005.png" alt=""></div>            <div><img src="./img/006.png" alt=""></div>        </div>    </body></html>

*{
    margin: 0;
    padding: 0;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 700px;
    background-color: #000;
    /* 视距让元素看起来更有3d效果 */
    perspective: 900px;
}
.xuanz{
    position: relative;
    width: 300px;
    height: 200px;
    cursor: pointer;
    /* 让子元素保留其3d位置 */
    transform-style: preserve-3d;
    animation: rotate 20s linear infinite;
}
.xuanz div{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
      -webkit-box-reflect: below 15px -webkit-linear-gradient(transparent 10%,rgba(0,0,0,0.3));
}
img{
    width: 200px;
}
.xuanz div:nth-child(1){
    transform: translateZ(300px);
    background-color: aquamarine;
}
.xuanz div:nth-child(2){
    transform: rotateY(60deg) translateZ(300px);
    background-color: tomato;
}
.xuanz div:nth-child(3){
    transform: rotateY(120deg) translateZ(300px);
    background-color: #6e9c72;
}
.xuanz div:nth-child(4){
    transform: rotateY(180deg) translateZ(300px);
    background-color: #5e5f7a;
}
.xuanz div:nth-child(5){
    transform: rotateY(240deg) translateZ(300px);
    background-color: #50a3bc;
}
.xuanz div:nth-child(6){
    transform: rotateY(300deg) translateZ(300px);
    background-color: #f9a99a;
}
@keyframes rotate{
    0%{
        transform: rotateY(0);
    }
    100%{
        transform: rotateY(360deg);
    }
}

檬了个柠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3d旋转

3d旋转先准备6张图片<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="./index.css"> <title></title> </head> <body> <div class="xuanz">
复制链接

扫一扫