css实现六边形图像悬浮倾斜转动效果代码-html代码-BFW代码库

css实现六边形图像悬浮倾斜转动效果代码

代码语言：html

所属分类：悬停

代码描述：css实现六边形图像悬浮倾斜转动效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">




    <style>
        html, body {
          display: flex;
        }
        
        html {
          min-height: 100vh;
        }
        
        body {
          box-sizing: border-box;
          align-items: center;
          flex-wrap: wrap;
          gap: 3em;
          justify-content: space-evenly;
          padding: 2em;
          background: crimson;
          filter: url(#roundout);
        }
        
        svg[height="0"] {
          position: fixed;
        }
        
        img {
          --ra: -15deg;
          /* change rotation angle */
          --aa: max(var(--ra), -1*var(--ra));
          width: 18em;
          aspect-ratio: 1/1;
          object-fit: cover;
          transform-origin: 50% 93.3012701892%;
          translate: calc(43.3012701892%*tan(30deg - var(--aa)) - 25%);
          scale: calc(cos(30deg - var(--aa))/0.8660254038);
          clip-path: polygon(calc(50% + calc(43.3012701892%/cos(30deg - var(--aa)))*cos(calc(calc(-60deg + var(--ra)) + 0deg))) calc(50% + calc(43.3012701892%/cos(30deg - var(--aa)))*sin(calc(calc(-60deg + var(--ra)) + 0deg))), calc(50% + calc(43.3012701892%/cos(30deg - var(--aa)))*cos(calc(calc(-60deg + var(--ra)) + 60deg))) calc(50% + calc(43.3012701892%/cos(30deg - var(--aa)))*sin(calc(calc(-60deg + var(--ra)) + 60deg))), calc(50% + calc(43.3012701892%/cos(30deg - var(--aa)))*cos(calc(calc(-60deg + var(--ra)) + 120deg))) calc(50% + calc(43.3012701892%/cos(30deg - var(--aa)))*sin(calc(calc(-60deg + var(--ra)) + 120deg))), calc(50% + calc(43.3012701892%/cos(30deg - var(--aa)))*cos(calc(calc(-60deg + var(--ra)) + 180deg))) calc(50% + calc(43.3012701892%/cos(30deg - var(--aa)))*sin(calc(calc(-60deg + var(--ra)) + 180deg))), calc(50% + calc(43.3012701892%/cos(30deg - var(--aa)))*cos(calc(calc(-60deg + var(--ra)) + 240deg))) calc(50% + calc(43.3012701892%/cos(30deg - var(--aa)))*sin(calc(calc(-60deg + var(--ra)) + 240deg))), calc(50% + calc(43.3012701892%/cos(30deg - var(--aa)))*cos(calc(calc(-60deg + var(--ra)) + 300deg))) calc(50% + calc(43.3012701892%/cos(30deg - var(--aa)))*sin(calc(calc(-60deg + var(--ra)) + 300deg))));
          transition: 0.5s;
        }
        img:hover {
          --ra: 0deg ;
        }
    </style>




</head>

<body>
    <!-- filter for rounding corners & creating outline-->
    <svg width="0" height="0&quo.........完整代码请登录后点击上方下载按钮下载查看