div+css实现图片立体盒子悬浮倾斜动画效果代码-html代码-BFW代码库

div+css实现图片立体盒子悬浮倾斜动画效果代码

代码语言：html

所属分类：悬停

代码描述：div+css实现图片立体盒子悬浮倾斜动画效果代码

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

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

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

  
  
<style>
@property --_l {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}
@property --_r {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

img {
  --d: 18px;  /* the depth */
  --a: 20deg; /* the angle */
  
  /* the below value is based on the depth and the angle.
     the formula is a bit difficult to express so we update it manually
  */
  --x: 10px;
  
  width: 250px; /* control the size */
  aspect-ratio: 1.1; /* you can use 1 as ratio but I found 1.1 a little better */
  object-fit: cover;
  padding-block: var(--d);
  transform: perspective(400px) rotateY(calc(var(--_i,1)*var(--a)));
  outline: var(--d) solid #0008;
  outline-offset: calc(-1*var(--d));
  --_d: calc(100% - var(--d));
  --_l: 0px;
  --_r: 0px;
  clip-path: polygon(
    var(--_l) calc(var(--_d) - var(--x)),
    var(--_l) calc(var(--d)  + var(--x)), 
    var(--d) var(--d),var(--_d) var(--d),
    calc(var(--_d) + var(--_r)) calc(var(--d)  + var(--x)),
    calc(var(--_d) + var(--_r)) calc(var(--_d) - var(--x)),  
    var(--_d) var(--_d),var(--d) var(--_d)
  .........完整代码请登录后点击上方下载按钮下载查看