多边形实现圆环效果

最新推荐文章于 2024-01-02 17:48:18 发布

wayne丶

最新推荐文章于 2024-01-02 17:48:18 发布

阅读量391

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_39408204/article/details/90411696

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

c's's实现效果图更直观的可以看图2

主要思路利用多边形的特性吧图片裁成等份的效果用css属性实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
    <style id="style">
        body{
            margin: 0;
            padding: 0;
        }
        #box{
            position: fixed;
            left: 0;
            top: 0;
            perspective: 500;
            width: 100%;
            height: 100%;
            
        }
        #box:hover #div{
            transform: rotateY(360deg)
        }
        #div{
            transform-style: preserve-3d;
            position: absolute;
            left: 50%;
            width: 66px;
            /* transform: rotateX(90deg); */
            transition: 6s;
            height: 585px;
            top: 50%;
            margin-left: -32.25px;
            margin-top: -292.5px;
        }
        #div div{
            left: 0;
            top: 0;
            width: 66px;
            height: 585px;
            position: absolute;
            background-size: cover;
            /* backface-visibility: hidden; */
            /* 隐藏背面 */
        }
    </style>
<body>
    <div id="box">
        <div id="div">
            <div></div>
        </div>
    </div>
</body>
<script src="data.js"></script> 

<script>//data.js中声明了一个数组 分别对于20张图片地址
    (function(){
        //布局生成
        let div = document.querySelector('#div');
        let sty = document.querySelector('#style')
        let cssInner = '';
        let inner = '';

        let w = div.offsetWidth;//div宽度
        console.log(w)

        let deg = 360/data.length;//获取多变角度
        let rad = Math.PI/180 * ((180-deg)/2);
        let r = Math.tan(rad)*w/2;//tan 接收的是一个弧度
        //tan 直角三角形中临边和对边的比值 
        // 弧度 = π/180 * 角度
            data.forEach((item,index) => {
                inner += '<div></div>'
                cssInner += `
                #div div:nth-child(${index + 1}){
                    background-image:url(${item});
                    transform: rotateY(${deg*index}deg) translateZ(${r}px)
                }
                `
            });
            div.innerHTML = inner
            sty.innerHTML += cssInner
    })()
</script>
</html>

wayne丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多边形实现圆环效果

c's's实现效果图更直观的可以看图2主要思路利用多边形的特性吧图片裁成等份的效果用css属性实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=d...
复制链接

扫一扫