1
2
3
4
5
6
` `* ">
极客时间对于推广渠道会有返利优惠,比如山月在极客时间买了一门课,再把课程分享给好友购买,这时极客时间会向山月返利20元左右。
而我现在做了一个返利平台,你可以在上边通过山月的链接购买课程,此时极客时间会向我返利。为了共同学习,而你可以添加我的微信 (shanyue94),我将把极客时间给我的返利发一个红包全部返给你

# 如何使用 css 写一个有 3D 效果的立方体

Issue

欢迎在 Issue 中交流与讨论: Issue 179 (opens new window)

Author

回答者: lihan1k (opens new window)

<div class="warp"> <div class="box box1">1</div> <div class="box box2">2</div> <div class="box box3">3</div> <div class="box box4">4</div> <div class="box box5">5</div> <div class="box box6">6</div> </div> `* { margin: 0; padding: 0; }

body { perspective: none; perspective-origin: 50% 50%; }

.warp { width: 500px; height: 500px; margin: 100px auto;

position: relative;

transform-style: preserve-3d;

transform: rotateX(45deg) rotateY(45deg);

animation: play 5s linear infinite;

}

.box { width: 200px; height: 200px; border: 2px solid #ccc;

text-align: center;
line-height: 200px;
font-size: 150px;
font-weight: bold;
color: #fff;

position: absolute;
top: 150px;
left: 150px;

}

.box1 { background: rgba(135,135,135,.3); transform: rotateY(90deg) translateZ(100px); }

.box2 { background: rgba(135,0,255,.3); transform: rotateY(90deg) translateZ(-100px); }

.box3 { background: rgba(255,125,125,.3); transform: rotateX(90deg) translateZ(-100px); }

.box4 { background: rgba(125,255,125,.3); transform: rotateX(90deg) translateZ(100px); }

.box5 { background: rgba(30,150,189,.3); transform: translateZ(100px); }

.box6 { background: rgba(169,150,189,.3); transform: translateZ(-100px); }

@keyframes play { from{ transform: rotateX(0) rotateY(0) rotateZ(0);} to {transform: rotateX(360deg) rotateY(180deg) rotateZ(90deg);} }`

关于山月

我的项目:
我的微信:shanyue94,欢迎交流
Last Updated: 5/14/2021, 1:48:53 PM