css实现三维柯达旋转木马式彩色切片效果代码-html代码-BFW代码库

css实现三维柯达旋转木马式彩色切片效果代码

代码语言：html

所属分类：三维

代码描述：css实现三维柯达旋转木马式彩色切片效果代码，鼠标移动可动态交互。

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
* {
 box-sizing:border-box;
  margin:0;
  padding:0;
}

html,
body {
  height:100%;
}

body {
  display:grid;
  place-items:center;
  background-color:black;
  overflow:hidden;
}

.container {
  perspective:1000px;
}

.inner {
  --x-deg:-45deg;
  --y-deg:3deg;
  transform-style:preserve-3d;
  position:relative;
  display:grid;
  place-items:center;
  transform:rotateX(var(--x-deg)) rotateY(var(--y-deg));
 }

.element {
  width:200px;
  height:150px;
  background-color:hsl(40, 80%, 50%);
  position:absolute;
  box-shadow:inset 0 0 50px hsl(0, 0%, 0%);
  transform-origin:center;
  transition:350ms ease;
}
</style>


</head>

<body>
  <div class="container">
  <div class="inner">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class=.........完整代码请登录后点击上方下载按钮下载查看