半透明旋转魔方特效的实现

最新推荐文章于 2021-03-09 15:42:05 发布

高shan仰止

最新推荐文章于 2021-03-09 15:42:05 发布

阅读量308

点赞数 1

文章标签： html 定位 animation

本文链接：https://blog.csdn.net/Gaoshanyz/article/details/109129158

版权

大家好，日更博主上线啦！今天分享的第二篇是旋转魔方的效果，通过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>

Like it if it’s useful ，thanks~~

高shan仰止

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
半透明旋转魔方特效的实现

大家好，日更博主上线啦！今天分享的第二篇是旋转魔方的效果，通过css有两种方式实现：1.先平移再旋转，2：先旋转再平移下面是代码，原理比较简单~~<!DOCTYPE html><html lang="ch"> <head> <meta charset="UTF-8"> <title>旋转魔方</title> <style type="text/css"
复制链接

扫一扫