CSS 3D立方体

下载代码

html

css

分享到微信朋友圈

html

css

.dice {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.dice_wall {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 6rem;
  color: #fff;
  position: absolute;
  top: calc(50% - 100px);
  left: calc(50% - 100px);
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, rgba(65, 105, 225, 0.8), skyblue);
}
.dice_wall:nth-child(1) {
  -webkit-transform: translateZ(100px);
          transform: translateZ(100px);
}
.dice_wall:nth-child(2) {
  -webkit-transform: rotateY(90deg) translateZ(100px);
          transform: rotateY(90deg) translateZ(100px);
}
.dice_wall:nth-child(3) {
  -webkit-transform: rotateX(90deg) translateZ(100px);
          transform: rotateX(90deg) translateZ(100px);
}
.dice_wall:nth-child(4) {
  -webkit-transform: rotateX(-90deg) translateZ(100px);
          transform: rotateX(-90deg) translateZ(100px);
}
.dice_wall:nth-child(5) {
  -webkit-transform: rotateY(-90deg) translateZ(100px);
          transform: rotateY(-90deg) translateZ(100px);
}
.dice_wall:nth-child(6) {
  -webkit-transform: rotateY(180deg) translateZ(100px);
          transform: rotateY(180deg) translateZ(100px);
}

body {
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  height: 100vh;
  overflow: hidden;
  display: flex;
  font-family: 'Anton', sans-serif;
  justify-content: center;
  align-items: center;
  -webkit-perspective: 800px;
          perspective: 800px;
}

.container {
  position: relative;
  display: grid;
  grid-template-rows: repeat(11, 10vh);
  grid-template-columns: repeat(11, 10vw);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.trigger:nth-child(1):hover ~ .monitor {
  -webkit-transform: rotateX(125deg) rotateY(-125deg);
          transform: rotateX(125deg) rotateY(-125deg);
}
.trigger:nth-child(2):hover ~ .monitor {
  -webkit-transform: rotateX(125deg) rotateY(-100deg);
          transform: rotateX(125deg) rotateY(-100deg);
}
.trigger:nth-child(3):hover ~ .monitor {
  -webkit-transform: rotateX(125deg) rotateY(-75deg);
          transform: rotateX(125deg) rotateY(-75deg);
}
.trigger:nth-child(4):hover ~ .monitor {
  -webkit-transform: rotateX(125deg) rotateY(-50deg);
          transform: rotateX(125deg) rotateY(-50deg);
}
.trigger:nth-child(5):hover ~ .monitor {
  -webkit-transform: rotateX(125deg) rotateY(-25deg);
          transform: rotateX(125deg) rotateY(-25deg);
}
.trigger:nth-child(6):hover ~ .monitor {
  -webkit-transform: rotateX(125deg) rotateY(0deg);
          transform: rotateX(125deg) rotateY(0deg);
}
.trigger:nth-child(7):hover ~ .monitor {
  -webkit-transform: rotateX(125deg) rotateY(25deg);
          transform: rotateX(125deg) rotateY(25deg);
}
.trigger:nth-child(8):hover ~ .monitor {
  -webkit-transform: rotateX(125deg) rotateY(50deg);
          transform: rotateX(125deg) rotateY(50deg);
}
.trigger:nth-child(9):hover ~ .monitor {
  -webkit-transform: rotateX(125deg) rotateY(75deg);
          transform: rotateX(125deg) rotateY(75deg);
}
.trigger:nth-child(10):hover ~ .monitor {
  -webkit-transform: rotateX(125deg) rotateY(100deg);
          transform: rotateX(125deg) rotateY(100deg);
}
.trigger:nth-child(11):hover ~ .monitor {
  -webkit-transform: rotateX(125deg) rotateY(125deg);
          transform: rotateX(125deg) rotateY(125deg);
}
.trigger:nth-child(12):hover ~ .monitor {
  -webkit-transform: rotateX(100deg) rotateY(-125deg);
          transform: rotateX(100deg) rotateY(-125deg);
}
.trigger:nth-child(13):hover ~ .monitor {
  -webkit-transform: rotateX(100deg) rotateY(-100deg);
          transform: rotateX(100deg) rotateY(-100deg);
}
.trigger:nth-child(14):hover ~ .monitor {
  -webkit-transform: rotateX(100deg) rotateY(-75deg);
          transform: rotateX(100deg) rotateY(-75deg);
}
.trigger:nth-child(15):hover ~ .monitor {
  -webkit-transform: rotateX(100deg) rotateY(-50deg);
          transform: rotateX(100deg) rotateY(-50deg);
}
.trigger:nth-child(16):hover ~ .monitor {
  -webkit-transform: rotateX(100deg) rotateY(-25deg);
          transform: rotateX(100deg) rotateY(-25deg);
}
.trigger:nth-child(17):hover ~ .monitor {
  -webkit-transform: rotateX(100deg) rotateY(0deg);
          transform: rotateX(100deg) rotateY(0deg);
}
.trigger:nth-child(18):hover ~ .monitor {
  -webkit-transform: rotateX(100deg) rotateY(25deg);
          transform: rotateX(100deg) rotateY(25deg);
}
.trigger:nth-child(19):hover ~ .monitor {
  -webkit-transform: rotateX(100deg) rotateY(50deg);
          transform: rotateX(100deg) rotateY(50deg);
}
.trigger:nth-child(20):hover ~ .monitor {
  -webkit-transform: rotateX(100deg) rotateY(75deg);
          transform: rotateX(100deg) rotateY(75deg);
}
.trigger:nth-child(21):hover ~ .monitor {
  -webkit-transform: rotateX(100deg) rotateY(100deg);
          transform: rotateX(100deg) rotateY(100deg);
}
.trigger:nth-child(22):hover ~ .monitor {
  -webkit-transform: rotateX(100deg) rotateY(125deg);
          transform: rotateX(100deg) rotateY(125deg);
}
.trigger:nth-child(23):hover ~ .monitor {
  -webkit-transform: rotateX(75deg) rotateY(-125deg);
          transform: rotateX(75deg) rotateY(-125deg);
}
.trigger:nth-child(24):hover ~ .monitor {
  -webkit-transform: rotateX(75deg) rotateY(-100deg);
          transform: rotateX(75deg) rotateY(-100deg);
}
.trigger:nth-child(25):hover ~ .monitor {
  -webkit-transform: rotateX(75deg) rotateY(-75deg);
          transform: rotateX(75deg) rotateY(-75deg);
}
.trigger:nth-child(26):hover ~ .monitor {
  -webkit-transform: rotateX(75deg) rotateY(-50deg);
          transform: rotateX(75deg) rotateY(-50deg);
}
.trigger:nth-child(27):hover ~ .monitor {
  -webkit-transform: rotateX(75deg) rotateY(-25deg);
          transform: rotateX(75deg) rotateY(-25deg);
}
.trigger:nth-child(28):hover ~ .monitor {
  -webkit-transform: rotateX(75deg) rotateY(0deg);
          transform: rotateX(75deg) rotateY(0deg);
}
.trigger:nth-child(29):hover ~ .monitor {
  -webkit-transform: rotateX(75deg) rotateY(25deg);
          transform: rotateX(75deg) rotateY(25deg);
}
.trigger:nth-child(30):hover ~ .monitor {
  -webkit-transform: rotateX(75deg) rotateY(50deg);
          transform: rotateX(75deg) rotateY(50deg);
}
.trigger:nth-child(31):hover ~ .monitor {
  -webkit-transform: rotateX(75deg) rotateY(75deg);
          transform: rotateX(75deg) rotateY(75deg);
}
.trigger:nth-child(32):hover ~ .monitor {
  -webkit-transform: rotateX(75deg) rotateY(100deg);
          transform: rotateX(75deg) rotateY(100deg);
}
.trigger:nth-child(33):hover ~ .monitor {
  -webkit-transform: rotateX(75deg) rotateY(125deg);
          transform: rotateX(75deg) rotateY(125deg);
}
.trigger:nth-child(34):hover ~ .monitor {
  -webkit-transform: rotateX(50deg) rotateY(-125deg);
          transform: rotateX(50deg) rotateY(-125deg);
}
.trigger:nth-child(35):hover ~ .monitor {
  -webkit-transform: rotateX(50deg) rotateY(-100deg);
          transform: rotateX(50deg) rotateY(-100deg);
}
.trigger:nth-child(36):hover ~ .monitor {
  -webkit-transform: rotateX(50deg) rotateY(-75deg);
          transform: rotateX(50deg) rotateY(-75deg);
}
.trigger:nth-child(37):hover ~ .monitor {
  -webkit-transform: rotateX(50deg) rotateY(-50deg);
          transform: rotateX(50deg) rotateY(-50deg);
}
.trigger:nth-child(38):hover ~ .monitor {
  -webkit-transform: rotateX(50deg) rotateY(-25deg);
          transform: rotateX(50deg) rotateY(-25deg);
}
.trigger:nth-child(39):hover ~ .monitor {
  -webkit-transform: rotateX(50deg) rotateY(0deg);
          transform: rotateX(50deg) rotateY(0deg);
}
.trigger:nth-child(40):hover ~ .monitor {
  -webkit-transform: rotateX(50deg) rotateY(25deg);
          transform: rotateX(50deg) rotateY(25deg);
}
.trigger:nth-child(41):hover ~ .monitor {
  -webkit-transform: rotateX(50deg) rotateY(50deg);
          transform: rotateX(50deg) rotateY(50deg);
}
.trigger:nth-child(42):hover ~ .monitor {
  -webkit-transform: rotateX(50deg) rotateY(75deg);
          transform: rotateX(50deg) rotateY(75deg);
}
.trigger:nth-child(43):hover ~ .monitor {
  -webkit-transform: rotateX(50deg) rotateY(100deg);
          transform: rotateX(50deg) rotateY(100deg);
}
.trigger:nth-child(44):hover ~ .monitor {
  -webkit-transform: rotateX(50deg) rotateY(125deg);
          transform: rotateX(50deg) rotateY(125deg);
}
.trigger:nth-child(45):hover ~ .monitor {
  -webkit-transform: rotateX(25deg) rotateY(-125deg);
          transform: rotateX(25deg) rotateY(-125deg);
}
.trigger:nth-child(46):hover ~ .monitor {
  -webkit-transform: rotateX(25deg) rotateY(-100deg);
          transform: rotateX(25deg) rotateY(-100deg);
}
.trigger:nth-child(47):hover ~ .monitor {
  -webkit-transform: rotateX(25deg) rotateY(-75deg);
          transform: rotateX(25deg) rotateY(-75deg);
}
.trigger:nth-child(48):hover ~ .monitor {
  -webkit-transform: rotateX(25deg) rotateY(-50deg);
          transform: rotateX(25deg) rotateY(-50deg);
}
.trigger:nth-child(49):hover ~ .monitor {
  -webkit-transform: rotateX(25deg) rotateY(-25deg);
          transform: rotateX(25deg) rotateY(-25deg);
}
.trigger:nth-child(50):hover ~ .monitor {
  -webkit-transform: rotateX(25deg) rotateY(0deg);
          transform: rotateX(25deg) rotateY(0deg);
}
.trigger:nth-child(51):hover ~ .monitor {
  -webkit-transform: rotateX(25deg) rotateY(25deg);
          transform: rotateX(25deg) rotateY(25deg);
}
.trigger:nth-child(52):hover ~ .monitor {
  -webkit-transform: rotateX(25deg) rotateY(50deg);
          transform: rotateX(25deg) rotateY(50deg);
}
.trigger:nth-child(53):hover ~ .monitor {
  -webkit-transform: rotateX(25deg) rotateY(75deg);
          transform: rotateX(25deg) rotateY(75deg);
}
.trigger:nth-child(54):hover ~ .monitor {
  -webkit-transform: rotateX(25deg) rotateY(100deg);
          transform: rotateX(25deg) rotateY(100deg);
}
.trigger:nth-child(55):hover ~ .monitor {
  -webkit-transform: rotateX(25deg) rotateY(125deg);
          transform: rotateX(25deg) rotateY(125deg);
}
.trigger:nth-child(56):hover ~ .monitor {
  -webkit-transform: rotateX(0deg) rotateY(-125deg);
          transform: rotateX(0deg) rotateY(-125deg);
}
.trigger:nth-child(57):hover ~ .monitor {
  -webkit-transform: rotateX(0deg) rotateY(-100deg);
          transform: rotateX(0deg) rotateY(-100deg);
}
.trigger:nth-child(58):hover ~ .monitor {
  -webkit-transform: rotateX(0deg) rotateY(-75deg);
          transform: rotateX(0deg) rotateY(-75deg);
}
.trigger:nth-child(59):hover ~ .monitor {
  -webkit-transform: rotateX(0deg) rotateY(-50deg);
          transform: rotateX(0deg) rotateY(-50deg);
}
.trigger:nth-child(60):hover ~ .monitor {
  -webkit-transform: rotateX(0deg) rotateY(-25deg);
          transform: rotateX(0deg) rotateY(-25deg);
}
.trigger:nth-child(61):hover ~ .monitor {
  -webkit-transform: rotateX(0deg) rotateY(0deg);
          transform: rotateX(0deg) rotateY(0deg);
}
.trigger:nth-child(62):hover ~ .monitor {
  -webkit-transform: rotateX(0deg) rotateY(25deg);
          transform: rotateX(0deg) rotateY(25deg);
}
.trigger:nth-child(63):hover ~ .monitor {
  -webkit-transform: rotateX(0deg) rotateY(50deg);
          transform: rotateX(0deg) rotateY(50deg);
}
.trigger:nth-child(64):hover ~ .monitor {
  -webkit-transform: rotateX(0deg) rotateY(75deg);
          transform: rotateX(0deg) rotateY(75deg);
}
.trigger:nth-child(65):hover ~ .monitor {
  -webkit-transform: rotateX(0deg) rotateY(100deg);
          transform: rotateX(0deg) rotateY(100deg);
}
.trigger:nth-child(66):hover ~ .monitor {
  -webkit-transform: rotateX(0deg) rotateY(125deg);
          transform: rotateX(0deg) rotateY(125deg);
}
.trigger:nth-child(67):hover ~ .monitor {
  -webkit-transform: rotateX(-25deg) rotateY(-125deg);
          transform: rotateX(-25deg) rotateY(-125deg);
}
.trigger:nth-child(68):hover ~ .monitor {
  -webkit-transform: rotateX(-25deg) rotateY(-100deg);
          transform: rotateX(-25deg) rotateY(-100deg);
}
.trigger:nth-child(69):hover ~ .monitor {
  -webkit-transform: rotateX(-25deg) rotateY(-75deg);
          transform: rotateX(-25deg) rotateY(-75deg);
}
.trigger:nth-child(70):hover ~ .monitor {
  -webkit-transform: rotateX(-25deg) rotateY(-50deg);
          transform: rotateX(-25deg) rotateY(-50deg);
}
.trigger:nth-child(71):hover ~ .monitor {
  -webkit-transform: rotateX(-25deg) rotateY(-25deg);
          transform: rotateX(-25deg) rotateY(-25deg);
}
.trigger:nth-child(72):hover ~ .monitor {
  -webkit-transform: rotateX(-25deg) rotateY(0deg);
          transform: rotateX(-25deg) rotateY(0deg);
}
.trigger:nth-child(73):hover ~ .monitor {
  -webkit-transform: rotateX(-25deg) rotateY(25deg);
          transform: rotateX(-25deg) rotateY(25deg);
}
.trigger:nth-child(74):hover ~ .monitor {
  -webkit-transform: rotateX(-25deg) rotateY(50deg);
          transform: rotateX(-25deg) rotateY(50deg);
}
.trigger:nth-child(75):hover ~ .monitor {
  -webkit-transform: rotateX(-25deg) rotateY(75deg);
          transform: rotateX(-25deg) rotateY(75deg);
}
.trigger:nth-child(76):hover ~ .monitor {
  -webkit-transform: rotateX(-25deg) rotateY(100deg);
          transform: rotateX(-25deg) rotateY(100deg);
}
.trigger:nth-child(77):hover ~ .monitor {
  -webkit-transform: rotateX(-25deg) rotateY(125deg);
          transform: rotateX(-25deg) rotateY(125deg);
}
.trigger:nth-child(78):hover ~ .monitor {
  -webkit-transform: rotateX(-50deg) rotateY(-125deg);
          transform: rotateX(-50deg) rotateY(-125deg);
}
.trigger:nth-child(79):hover ~ .monitor {
  -webkit-transform: rotateX(-50deg) rotateY(-100deg);
          transform: rotateX(-50deg) rotateY(-100deg);
}
.trigger:nth-child(80):hover ~ .monitor {
  -webkit-transform: rotateX(-50deg) rotateY(-75deg);
          transform: rotateX(-50deg) rotateY(-75deg);
}
.trigger:nth-child(81):hover ~ .monitor {
  -webkit-transform: rotateX(-50deg) rotateY(-50deg);
          transform: rotateX(-50deg) rotateY(-50deg);
}
.trigger:nth-child(82):hover ~ .monitor {
  -webkit-transform: rotateX(-50deg) rotateY(-25deg);
          transform: rotateX(-50deg) rotateY(-25deg);
}
.trigger:nth-child(83):hover ~ .monitor {
  -webkit-transform: rotateX(-50deg) rotateY(0deg);
          transform: rotateX(-50deg) rotateY(0deg);
}
.trigger:nth-child(84):hover ~ .monitor {
  -webkit-transform: rotateX(-50deg) rotateY(25deg);
          transform: rotateX(-50deg) rotateY(25deg);
}
.trigger:nth-child(85):hover ~ .monitor {
  -webkit-transform: rotateX(-50deg) rotateY(50deg);
          transform: rotateX(-50deg) rotateY(50deg);
}
.trigger:nth-child(86):hover ~ .monitor {
  -webkit-transform: rotateX(-50deg) rotateY(75deg);
          transform: rotateX(-50deg) rotateY(75deg);
}
.trigger:nth-child(87):hover ~ .monitor {
  -webkit-transform: rotateX(-50deg) rotateY(100deg);
          transform: rotateX(-50deg) rotateY(100deg);
}
.trigger:nth-child(88):hover ~ .monitor {
  -webkit-transform: rotateX(-50deg) rotateY(125deg);
          transform: rotateX(-50deg) rotateY(125deg);
}
.trigger:nth-child(89):hover ~ .monitor {
  -webkit-transform: rotateX(-75deg) rotateY(-125deg);
          transform: rotateX(-75deg) rotateY(-125deg);
}
.trigger:nth-child(90):hover ~ .monitor {
  -webkit-transform: rotateX(-75deg) rotateY(-100deg);
          transform: rotateX(-75deg) rotateY(-100deg);
}
.trigger:nth-child(91):hover ~ .monitor {
  -webkit-transform: rotateX(-75deg) rotateY(-75deg);
          transform: rotateX(-75deg) rotateY(-75deg);
}
.trigger:nth-child(92):hover ~ .monitor {
  -webkit-transform: rotateX(-75deg) rotateY(-50deg);
          transform: rotateX(-75deg) rotateY(-50deg);
}
.trigger:nth-child(93):hover ~ .monitor {
  -webkit-transform: rotateX(-75deg) rotateY(-25deg);
          transform: rotateX(-75deg) rotateY(-25deg);
}
.trigger:nth-child(94):hover ~ .monitor {
  -webkit-transform: rotateX(-75deg) rotateY(0deg);
          transform: rotateX(-75deg) rotateY(0deg);
}
.trigger:nth-child(95):hover ~ .monitor {
  -webkit-transform: rotateX(-75deg) rotateY(25deg);
          transform: rotateX(-75deg) rotateY(25deg);
}
.trigger:nth-child(96):hover ~ .monitor {
  -webkit-transform: rotateX(-75deg) rotateY(50deg);
          transform: rotateX(-75deg) rotateY(50deg);
}
.trigger:nth-child(97):hover ~ .monitor {
  -webkit-transform: rotateX(-75deg) rotateY(75deg);
          transform: rotateX(-75deg) rotateY(75deg);
}
.trigger:nth-child(98):hover ~ .monitor {
  -webkit-transform: rotateX(-75deg) rotateY(100deg);
          transform: rotateX(-75deg) rotateY(100deg);
}
.trigger:nth-child(99):hover ~ .monitor {
  -webkit-transform: rotateX(-75deg) rotateY(125deg);
          transform: rotateX(-75deg) rotateY(125deg);
}
.trigger:nth-child(100):hover ~ .monitor {
  -webkit-transform: rotateX(-100deg) rotateY(-125deg);
          transform: rotateX(-100deg) rotateY(-125deg);
}
.trigger:nth-child(101):hover ~ .monitor {
  -webkit-transform: rotateX(-100deg) rotateY(-100deg);
          transform: rotateX(-100deg) rotateY(-100deg);
}
.trigger:nth-child(102):hover ~ .monitor {
  -webkit-transform: rotateX(-100deg) rotateY(-75deg);
          transform: rotateX(-100deg) rotateY(-75deg);
}
.trigger:nth-child(103):hover ~ .monitor {
  -webkit-transform: rotateX(-100deg) rotateY(-50deg);
          transform: rotateX(-100deg) rotateY(-50deg);
}
.trigger:nth-child(104):hover ~ .monitor {
  -webkit-transform: rotateX(-100deg) rotateY(-25deg);
          transform: rotateX(-100deg) rotateY(-25deg);
}
.trigger:nth-child(105):hover ~ .monitor {
  -webkit-transform: rotateX(-100deg) rotateY(0deg);
          transform: rotateX(-100deg) rotateY(0deg);
}
.trigger:nth-child(106):hover ~ .monitor {
  -webkit-transform: rotateX(-100deg) rotateY(25deg);
          transform: rotateX(-100deg) rotateY(25deg);
}
.trigger:nth-child(107):hover ~ .monitor {
  -webkit-transform: rotateX(-100deg) rotateY(50deg);
          transform: rotateX(-100deg) rotateY(50deg);
}
.trigger:nth-child(108):hover ~ .monitor {
  -webkit-transform: rotateX(-100deg) rotateY(75deg);
          transform: rotateX(-100deg) rotateY(75deg);
}
.trigger:nth-child(109):hover ~ .monitor {
  -webkit-transform: rotateX(-100deg) rotateY(100deg);
          transform: rotateX(-100deg) rotateY(100deg);
}
.trigger:nth-child(110):hover ~ .monitor {
  -webkit-transform: rotateX(-100deg) rotateY(125deg);
          transform: rotateX(-100deg) rotateY(125deg);
}
.trigger:nth-child(111):hover ~ .monitor {
  -webkit-transform: rotateX(-125deg) rotateY(-125deg);
          transform: rotateX(-125deg) rotateY(-125deg);
}
.trigger:nth-child(112):hover ~ .monitor {
  -webkit-transform: rotateX(-125deg) rotateY(-100deg);
          transform: rotateX(-125deg) rotateY(-100deg);
}
.trigger:nth-child(113):hover ~ .monitor {
  -webkit-transform: rotateX(-125deg) rotateY(-75deg);
          transform: rotateX(-125deg) rotateY(-75deg);
}
.trigger:nth-child(114):hover ~ .monitor {
  -webkit-transform: rotateX(-125deg) rotateY(-50deg);
          transform: rotateX(-125deg) rotateY(-50deg);
}
.trigger:nth-child(115):hover ~ .monitor {
  -webkit-transform: rotateX(-125deg) rotateY(-25deg);
          transform: rotateX(-125deg) rotateY(-25deg);
}
.trigger:nth-child(116):hover ~ .monitor {
  -webkit-transform: rotateX(-125deg) rotateY(0deg);
          transform: rotateX(-125deg) rotateY(0deg);
}
.trigger:nth-child(117):hover ~ .monitor {
  -webkit-transform: rotateX(-125deg) rotateY(25deg);
          transform: rotateX(-125deg) rotateY(25deg);
}
.trigger:nth-child(118):hover ~ .monitor {
  -webkit-transform: rotateX(-125deg) rotateY(50deg);
          transform: rotateX(-125deg) rotateY(50deg);
}
.trigger:nth-child(119):hover ~ .monitor {
  -webkit-transform: rotateX(-125deg) rotateY(75deg);
          transform: rotateX(-125deg) rotateY(75deg);
}
.trigger:nth-child(120):hover ~ .monitor {
  -webkit-transform: rotateX(-125deg) rotateY(100deg);
          transform: rotateX(-125deg) rotateY(100deg);
}
.trigger:nth-child(121):hover ~ .monitor {
  -webkit-transform: rotateX(-125deg) rotateY(125deg);
          transform: rotateX(-125deg) rotateY(125deg);
}

.monitor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: 500ms;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.monitor_guide {
  position: absolute;
  top: 50%;
  left: 25%;
  width: 50%;
  border: 1px dashed #fff;
}
.monitor_guide::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-top: 1px dashed #fff;
  border-right: 1px dashed #fff;
}
.monitor_guide.o-x::before {
  top: -10px;
  right: 0;
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}
.monitor_guide.o-y {
  left: 50%;
  top: 25%;
  width: 0;
  height: 50%;
}
.monitor_guide.o-y::before {
  bottom: 0;
  right: -10px;
  -webkit-transform: rotateZ(135deg);
          transform: rotateZ(135deg);
}
.monitor_guide.o-z {
  -webkit-transform: rotateY(90deg);
          transform: rotateY(90deg);
}
.monitor_guide.o-z::before {
  top: -10px;
  left: 0;
  -webkit-transform: rotateZ(-135deg);
          transform: rotateZ(-135deg);
}

.demo {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 0, 0.7);
  transition: 1000ms;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg