咦,发现两个新知识.
- perspective 隔代也会有影响. 所以可以放在爷爷身上.能解决旋转容器时, perspective-origin 跟着转.
2.scss确实厉害, 本来css是无法用一些数学函数的. 但scss有啊!这个还是挺方便的.
html
<div class="wrapper">
<div class="content">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</div>
scss
.wrapper{
width: 400px;
height: 400px;
margin: 100px auto;
border: 1px solid black;
display: flex;
perspective: 300px;
.content {
transform-style: preserve-3d;
width: 100px;
height: 100px;
position: relative;
margin: auto;
animation: move 5s ease infinite;
div{
width: 100%;
height: 100%;
border: 1px solid #F08080;
border-radius: 20px;
position: absolute;
left: 0;
top: 0;
text-align: center;
line-height: 100px;
font-size: 40px;
font-weight: bold;
opacity: 0.5;
}
@for $i from 1 through 6 {
@if ($i <= 4) {
div:nth-of-type(#{$i}) {
transform: rotateY(#{($i - 1) * 90}deg) translateZ(50px);
background-color: rgb(floor(random()*255),floor(random()*255),floor(random()*255));
}
}
}
div:nth-of-type(5) {
transform: rotateX(90deg) translateZ(50px);
background-color: #F08080;
}
div:nth-of-type(6) {
transform: rotateX(-90deg) translateZ(50px);
background-color: #F0AD4E;
}
}
}
@keyframes move{
0% {
transform: rotate(0deg) rotateX(0deg) rotateY(0deg);
}
25%{
transform: rotate(360deg) rotateX(0deg) rotateY(0deg);
}
50%{
transform: rotate(360deg) rotateX(360deg) rotateY(0deg);
}
100% {
transform: rotate(360deg) rotateX(360deg) rotateY(360deg);
}
}
网友评论