css实现旋转魔方效果_综合

大家好，日更博主上线啦！今天分享的第二篇是旋转魔方的效果，通过css有两种方式实现：1.先平移再旋转，2：先旋转再平移

下面是代码，原理比较简单，改改图片地址就可以查看效果喽~~

<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>旋转魔方</title>

<style type="text/css">
html {
perspective: 800px; /* perspective越大表示距眼睛越远设置元素被查看位置的视图：设置了这个才有后面的3d效果 */
}

.all {
width: 200px;
height: 200px;
               margin: 300px auto;
/*background-color: #f10215;*/
/*设置相对定位让它的子元素参照它绝对定位*/
position: relative;
/*transform-style 设置3d变形效果必须给最近的父元素不加没有3d*/
transform-style: preserve-3d;
               /* 设置动画的执行时间无限循环迅速运动 */
animation: move 10s infinite linear;

               /* 设置最大div的旋转位置 x y z 默认都是center */
               /* transform-origin: center center 100px; */

}

/*设置all下的所有的div的样式给他们宽高和透明效果*/
.all > div {
width: 200px;
height: 200px;
opacity: 0.7;
position: absolute;
}

img {
/* vertical-align: top; */
width: 200px;
height: 200px;
/* background-size: contain; */
}

           /* 先平移再旋转 */

           /* 沿x轴平移左负右正 */
           /* 沿y轴平移上负下正 */
           /* 沿z轴平移前正后负 */
           /* .box1 {
               transform-origin: left top;
           transform: translateX(200px) rotateY(-90deg);
           }
           .box2 {
               transform-origin: right top;
           transform: translateX(-200px) rotateY(90deg);
           }
           .box3 {
               transform-origin:left bottom;
           transform: translateY(-200px) rotateX(-90deg);
           }
           .box4 {
               transform-origin:left top;
           transform: translateY(200px) rotateX(90deg);
           }
           .box5 {
           transform: translateZ(200px);
           }
           .box6 {

           } */
           /*创建关键帧 */

                       @keyframes move {
                       from {
                       transform: rotateX(0) rotateZ(0);
                       }
                       to {

                       transform: rotateX(1turn) rotateZ(1turn);
                       }
                       }

/* 先旋转再平移沿中间的轴旋转后面就不用改变主轴位置*/
/*设置6个面的旋转想象一下空间中有6个面这六个面最初都是覆盖在同一个平面的然后经过平移到6个位置*/

.box1 {
transform: rotateY(90deg) translateZ(100px);
}

.box2 {
transform: rotateY(90deg) translateZ(-100px);
}

.box3 {
transform: rotateX(90deg) translateZ(100px);
}

.box4 {
transform: rotateX(90deg) translateZ(-100px);
}

.box5 {
transform: translateZ(100px);
}

.box6 {
transform: translateZ(-100px);
}

</style>
</head>
<body>

<div class="all">
<div class="box1">
<img src="pic/008.jpg">
</div>
<div class="box2">
<img src="pic/002.jpg">
</div>
<div class="box3">
<img src="pic/003.jpg">
</div>
<div class="box4">
<img src="pic/004.jpg">
</div>
<div class="box5">
<img src="pic/005.jpg">
</div>
<div class="box6">
<img src="pic/007.jpg">
</div>
</div>
</body>
</html>