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

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

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看