一个简单好玩的旋转案例

最新推荐文章于 2024-10-13 20:52:25 发布

xiaoH_ing

最新推荐文章于 2024-10-13 20:52:25 发布

阅读量251

点赞数 2

分类专栏：旋转文章标签： css3 html5

本文链接：https://blog.csdn.net/Hr_ving/article/details/119423486

版权

旋转专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这是一个使用HTML5和CSS3实现的3D图片环绕展示效果。通过设置元素的`transform`属性，实现了图片在div周围环绕并旋转的动画。代码中包含了多个div，每个div对应一张图片，通过调整`translate3d`和`rotate3d`来定位和旋转图片，创建出3D环绕的视觉体验。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片环绕</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        body{
            display: flex;
        }
        section{
            width: 100px;
            height: 200px;
            border: 1px solid black;
            
            margin: auto;

            /*使div脱离文档流*/
            position: relative;

            /*形成3d空间,给需要3d效果的盒子的父级添加*/
            transform-style: preserve-3d;


            /* transform: rotate3d(1,1,1,60deg); */

            /*添加动画效果*/
            animation: divMove 20s linear infinite;
        }


        div{
            width: 200px;
            height: 100px;

            /*脱离文档流*/
            position: absolute;

            /*改变旋转原点,使div绕着section旋转*/
            transform-origin: center center -500px;
        }

        img{
            width: 100%;
            height: 100%;
        }



        /*3d的平移x、y、z都为数值， 3d的旋转x、y、z都为矢量值（0，1），第四个参数为旋转的角度*/
        div:nth-child(1){
            transform: translate3d(-50px,50px,500px) rotate3d(0,1,0,36deg);
        }
        div:nth-child(2){
            transform: translate3d(-50px,50px,500px) rotate3d(0,1,0,72deg);
        }
        div:nth-child(3){
            transform: translate3d(-50px,50px,500px) rotate3d(0,1,0,108deg);
        }
        div:nth-child(4){
            transform: translate3d(-50px,50px,500px) rotate3d(0,1,0,144deg);
        }
        div:nth-child(5){
            transform: translate3d(-50px,50px,500px) rotate3d(0,1,0,180deg);
        }
        div:nth-child(6){
            transform: translate3d(-50px,50px,500px) rotate3d(0,1,0,216deg);
        }
        div:nth-child(7){
            transform: translate3d(-50px,50px,500px) rotate3d(0,1,0,252deg);
        }
        div:nth-child(8){
            transform: translate3d(-50px,50px,500px) rotate3d(0,1,0,288deg);
        }
        div:nth-child(9){
            transform: translate3d(-50px,50px,500px) rotate3d(0,1,0,324deg);
        }
        div:nth-child(10){
            transform: translate3d(-50px,50px,500px) rotate3d(0,1,0,360deg);
        }



        /*添加动画效果*/
        @keyframes divMove{
            0%{
                transform: rotateX(30deg) rotateY(0deg);
            }
            25%{
                transform: rotateX(30deg) rotateY(90deg);
            }
            50%{
                transform: rotateX(30deg) rotateY(180deg);
            }
            75%{
                transform: rotateX(30deg) rotateY(270deg);
            }
            100%{
                transform: rotateX(30deg) rotateY(360deg);
            }
        }
    </style>
</head>
<body>
    <section>
        <div><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.nga.178.com%2Fattachments%2Fmon_202007%2F21%2F-39t2Q5-8oylZ1xT3cS35s-1v5.jpg.medium.jpg&refer=http%3A%2F%2Fimg.nga.178.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630472155&t=482663009478cb677ef052582661b882" alt=""></div>
        <div><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile.moyublog.com%2Fd%2Ffile%2F2021-02-22%2Fde0b20cae4c8df6b8c31aead15299244.jpg&refer=http%3A%2F%2Ffile.moyublog.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630472155&t=f1c294a3d3e640ed820a15f5f141c904" alt=""></div>
        <div><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile.moyublog.com%2Fd%2Ffile%2F2021-03-04%2F9d7adb6a6039a272c3cbbf9204918078.jpg&refer=http%3A%2F%2Ffile.moyublog.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630472155&t=9b364b136bddff0c878f947800e1d109" alt=""></div>
        <div><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.yxbao.com%2Farticle%2Fimage%2F202001%2F03%2Fc00d173790.jpg&refer=http%3A%2F%2Fimg.yxbao.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630472155&t=b9f7f4ff14478463456306328f594564" alt=""></div>
        <div><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091317%2Fwkaliudysdnwkaliudysdn.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630472155&t=5f190dd658d3a885c10b6a9dcad7f578" alt=""></div>
        <div><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091317%2Froyfydthozvroyfydthozv.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630472155&t=aff0d21a340086f8db85930fe980b313" alt=""></div>
        <div><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fol.3dmgame.com%2Fuploads%2Fimages%2Fraiders%2F20190226%2F1551145733_840792.jpg&refer=http%3A%2F%2Fol.3dmgame.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630472155&t=2d92cd22b2c36551e9edda3ef40f76d8" alt=""></div>
        <div><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Ffront%2F492%2Fw1920h972%2F20190108%2Flj5o-hrkkwef6927576.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630472155&t=33c1ab4599ff4187a9754e8be9322ab8" alt=""></div>
        <div><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.niulol.com%2Fd%2Ffile%2Fbigpic%2F2020%2F12%2F31%2F14%2Fyhs5huel4vo351.jpg&refer=http%3A%2F%2Fwww.niulol.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630472227&t=ac4625327998cdbd378c8d344ca99b24" alt=""></div>
        <div><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091114%2Fx2kav2djgbkx2kav2djgbk.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630472227&t=f473d8c81e87e93d7bbe48625706abaa" alt=""></div>
    </section>
</body>
</html>