css实现多种颜色三维苹果imac电脑旋转效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：css实现多种颜色三维苹果imac电脑旋转效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
<style>
:root {
  --screenSize: 4vmin;
  --borderSize: 2vmin;
  --primary: slategray;
  --secondary: darkslategray;
}
body {
  transform-style: preserve-3d;
  perspective: 2000px;
  overflow: hidden;
  text-align: center;
}
#wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  margin-top: 6vmin;
  padding: 0;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  transform-style: preserve-3d;
  -webkit-animation: rotateAll 10000ms linear infinite;
          animation: rotateAll 10000ms linear infinite;
}
.screen {
  position: absolute;
  height: calc(var(--screenSize) * 10);
  width: calc(var(--screenSize) * 16);
  margin-top: 5vmin;
  transform-style: preserve-3d;
}
.screen {
  position: absolute;
  background: var(--secondary);
  border-radius: 1vmin 1vmin 0 0;
  border: var(--borderSize) solid var(--secondary);
}
.screen::before {
  content: "";
  position: absolute;
  width: calc(100% + var(--borderSize) + var(--borderSize));
  height: 20%;
  left: calc(var(--borderSize) * -1);
  background: var(--secondary);
  border-radius: 0 0 1vmin 1vmin;
  top: calc(var(--screenSize) * 10 + var(--borderSize));
}
.screen:nth-of-type(1) {
  background-image: url(//repo.bfw.wiki/bfwrepo/image/5df86dc72ff0f.png);
  background-repeat: no-repeat;
  background-size: cover;
  border: var(--borderSize) solid #ecedef;
}
.screen:nth-of-type(1)::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: var(--borderSize) solid #ecedef;
  background: none;
  box-shadow: 4vmin 4vmin 20vmin white inset;
  border-radius: 1vmin 1vmin 0 0;
  transform: translateZ(0.01vmin);
  -webkit-animation: screenGlare 10000ms linear infinite;
          animation: screenGlare 10000ms linear infinite;
}
.screen:nth-of-type(1)::before {
  background: var(--primary);
}
.screen:nth-of-type(2) {
  transform: translateZ(-0.1vmin);
}
.screen:nth-of-type(3) {
  transform: translateZ(-0.2vmin);
}
.screen:nth-of-type(4) {
  transform: translateZ(-0.3vmin);
}
.screen:nth-of-type(5) {
  transform: translateZ(-0.4vmin);
}
.screen:nth-of-type(6) {
  transform: translateZ(-0.5vmin);
}
.screen:nth-of-type(7) {
  transform: translateZ(-0.6vmin);
}
.screen:nth-of-type(8) {
  transform: translateZ(-0.7vmin);
}
.screen:nth-of-type(9) {
  transform: translateZ(-0.8vmin);
}
.screen:nth-of-type(10) {
  transform: translateZ(-0.9vmin);
}
.screen:nth-of-type(11) {
  transform: translateZ(-1vmin);
}
.screen:nth-of-type(12) {
  transform: translateZ(-1.1vmin);
}
.screen:nth-of-type(13) {
  transform: translateZ(-1.2vmin);
}
.screen:nth-of-type(14) {
  transform: translateZ(-1.3vmin);
}
.screen:nth-of-type(15) {
  transform: translateZ(-1.4vmin);
}
.screen:nth-of-type(16) {
  transform: translateZ(-1.5vmin);
}
.screen::after {
  content: "";
  position: absolute;
  width: calc(100% + var(--borderSize) + var(--borderSize));
  left: calc(var(--borderSize) * -1);
  top: calc(var(--borderSize) * -1);
  height: calc(120% + var(--borderSize) + var(--borderSize));
  transform: translateZ(-0.05vmin);
  background: var(--secondary);
  border-radius: 1vmin;
}
.screen:nth-of-type(16)::after {
  background-image: url(//repo.bfw.wiki/bfwrepo/icon/5de9aa30c8186.png);
  background-repeat: no-repeat;
  background-position: 50% 35%;
  background-size: calc(var(--screenSize) * 3);
  transform: translateZ(-0.05vmin) rotateY(180deg);
  box-shadow: 0 0 calc(var(--screenSize) * 2) rgba(0, 0, 0, 0.6) inset;
  opacity: 0.5;
}
.stand {
  position: absolute;
  width: calc(var(--screenSize) * 6);
  height: var(--borderSize);
  background: var(--primary);
  top: calc(var(--screenSize) * 10 + 30vmin);
  transform: rotateY(-90deg) translateX(-17%);
  transform-style: preserve-3d;
}
.stand::after {
  content: "";
  position: absolute;
  width: var(--borderSize);
  height: calc(var(--screenSize) * 8);
  background: var(--primary);
  bottom: 0;
  transform: translateX(200%) rotate(10deg);
  left: var(--screenSize);
}
.stand::before {
  content: "";
  position: absolute;
  width: var(--screenSize);
  height: var(--screenSize);
  background: var(--primary);
  top: calc(var(--screenSize) * -7.8);
  left: calc(var(--screenSize) * 2.62);
}
.standWrapper {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateY(13vmin) translateX(-34vmin) scaleX(2) scaleY(0.8);
}
.standWrapper div:nth-of-type(2) {
  transform: rotateY(-90deg) translateX(-17%) translateZ(-10vmin);
}
.standWrapper .back,
.standWrapper .front {
  position: absolute;
  width: 10vmin;
  height: calc(var(--screenSize) * 8);
  background: var(--primary);
  top: calc(var(--screenSize) * 10);
  left: calc(var(--screenSize) * 3);
  transform: rotateX(-10deg) translateZ(-7.7vmin) rotateY(180deg);
  box-shadow: 0 calc(var(--screenSize) * 5) var(--borderSize) rgba(0, 0, 0, 0.1)
    inset;
  -webkit-clip-path: polygon(
    0% 0%,
    0% 100%,
    40% 100%,
    40% 20%,
    60% 20%,
    60% 60%,
    40% 60%,
    40% 100%,
    100% 100%,
    100% 0%
  );
          clip-path: polygon(
    0% 0%,
    0% 100%,
    40% 100%,
    40% 20%,
    60% 20%,
    60% 60%,
    40% 60%,
    40% 100%,
    100% 100%,
    100% 0%
  );
}
.standWrapper .front {
  transform: rotateX(-10deg) translateZ(-6.1vmin);
}
.standWrapper .back {
  box-shadow: 0 calc(var(--screenSize) * 1) calc(var(--borderSize) * 4)
    rgba(0, 0, 0, 0.1) inset;
}
.standWrapper .top {
  position: absolute;
  width: 10vmin;
  height: calc(var(--screenSize) * 6);
  background: var(--primary);
  top: calc(var(--scre.........完整代码请登录后点击上方下载按钮下载查看