react+gsap实现小熊滑板静止视觉差异效果代码-html代码-BFW代码库

react+gsap实现小熊滑板静止视觉差异效果代码

代码语言：html

代码描述：react+gsap实现小熊滑板静止视觉差异效果代码

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


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

<head>

  <meta charset="UTF-8">
  

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tailwind.2.2.7.css">
  
<style>
*,
*:after,
*:before {
  box-sizing: border-box;
  transform-style: preserve-3d;
}
body {
  background: #233143;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}
.parallax-container {
  height: 50vmin;
  width: 50vmin;
  perspective: 50vmin;
  transform: translate3d(0, 0, 50vmin);
}
.parallax {
  transform: rotateX(calc((var(--rx, 0) * var(--range-y, 0)) * 1deg)) rotateY(calc((var(--ry, 0) * var(--range-x, 0)) * 1deg)) rotate(calc((var(--r, 0) * var(--range-x, 0)) * 1deg));
}
.parallax-item {
  left: calc(var(--x, 50) * 1%);
  top: calc(var(--y, 50) * 1%);
  height: calc(var(--height, auto) * 1%);
  width: calc(var(--width, auto) * 1%);
  transform: translate(-50%, -50%) translate3d(calc((var(--mx, 0) * var(--range-x, 0)) * 1%), calc((var(--my, 0) * var(--range-y, 0)) * 1%), calc(var(--mz, 0) * 1vmin)) rotateX(calc((var(--rx, 0) * var(--range-y, 0)) * 1deg)) rotateY(calc((var(--ry, 0) * var(--range-x, 0)) * 1deg)) rotate(calc((var(--r, 0) * var(--range-x, 0)) * 1deg));
}
</style>



</head>

<body>
  <div id="app"></div>


  
      <script type="module">
import React from 'https://cdn.skypack.dev/react';
import T from 'https://cdn.skypack.dev/prop-types';
import gsap from 'https://cdn.skypack.dev/gsap';
import { render } from 'https://cdn.skypack.dev/react-dom';

/**
 * All movements and rotations are based on a decimal scale.
 * 0 - 1 for movement will be 0% - 100% translation
 * 0 - 1 for rotation will be 0deg to 360deg rotation
 *
 * Position is based on relative position to the container in percentag.........完整代码请登录后点击上方下载按钮下载查看