css实现照片三维立体悬浮效果代码-html代码-BFW代码库

css实现照片三维立体悬浮效果代码

代码语言：html

所属分类：悬停

代码描述：css实现照片三维立体悬浮效果代码，通过css将照片变成立体方块，悬浮倾斜变平面照片。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        img {
          /* adjust the below to control the 3D effect */
          --x: 10px;
          --y: 20px;
          transform: perspective(1000px) rotateX(var(--_a,40deg));
          /* */
          clip-path: polygon(       
             var(--y)              var(--y),       
             calc(100% - var(--y)) var(--y),       
             calc(100% - var(--y)) calc(100% - var(--y)),       
             calc(100% - var(--y) - var(--x)) var(--_c,100%),       
             calc(var(--x) + var(--y))        var(--_c,100%),      
             var(--y)        calc(100% - var(--y))       
             );
          outline: var(--y) solid rgba(0,0,0,0.4);
          outline-offset: calc(-1*var(--y));
          padding: var(--y) var(--y) 0 var(--y);
          transition: 1s;
        }
        .box:hover img {
          --_a: 0deg;
          --_c: calc(100% - var(--.........完整代码请登录后点击上方下载按钮下载查看