CSS实现3D正方体动态旋转效果【源码+GIF图】

小伙伴们看到那些页面上炫酷的正方体，是不是都觉得美美的很精致，很想自己动手写一个属于自己的，但是又学业繁忙而找不到时间去实现，今天我就为大家写一个，哒哒哒，废话不多说，开始上代码~
额，要不先说说它的实现原理吧，方便理解，嘿嘿。

实现原理：

transition-property 要应用过渡的css属性
transition-duration 过渡发生的时长
transition-timing-function 过渡过程速度变化的设置

可设置值:

linear(匀速）ease（缓慢开始，缓慢结束。默认） ease-in（缓慢开始） ease-out（缓慢结束） ease-in-out（缓慢开始，缓慢结束，但与ease速度不同）

transition-delay 过渡何时开始
transition 以上属性简写

　　使用：

　　不同浏览器需要在属性前加前缀：chrome、Safari 需要加 -webkit-，Firefox前缀-moz-，IE前缀-ms-，Opera前缀-o-

perspective：建立3D场景，实现透视效果，值为物品与屏幕距离

　　perspective-origin：子元素在视图中的位置，X和Y值表示（注意：perspective和perspective-origin都要在实现3D效果元素的父元素中设置）

　　transform-style：规定如何在 3D 空间中呈现被嵌套的元素（可设置为flat或preserve-3d）

　　transform-origin：旋转中心

　　　　X轴可设置为：left | center | right

　　　　Y轴可设置为：top | center | bottom

　　　　Z轴设置在Z轴上的位置：length px

　　本例中用到的方法有translateX（px），translateY，translateZ，表示在XYZ轴上移动和rotateX（deg），rotateY，rotateZ绕XYZ轴旋转。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;
            padding: 0;
        }body{perspective: 600px;;
        }.box{width: 400px;
            height: 400px;

            margin:100px auto;
            position:relative;

        }.box:hover ul{transform: rotateX(360deg) rotateY(360deg);
        }ul{width: 400px;
            height: 400px;

            transform: rotateX(-30deg) rotateY(0deg) ;
            transform-style: preserve-3d;
            transition: all 10s linear;
        }li{list-style: none;
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            background:rgba(255,56,49,0.5);
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            bottom:0;
            top: 0;;

        }ul :nth-child(1){transform:rotateY(0deg) translateZ(100px);
        }ul :nth-child(2){transform: rotateY(-90deg) translateZ(100px);
        }ul :nth-child(3) {transform: rotateY(-180deg) translateZ(100px);
        }ul :nth-child(4){transform: rotateY(-270deg) translateZ(100px);
        }ul :nth-child(5){transform: rotatex(90deg) translateZ(100px);
        }ul :nth-child(6){transform: rotatex(90deg) translateZ(-100px);
        }</style>
</head>
<body>
<div class="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>

效果图：

CSS实现3D正方体动态旋转效果【源码+GIF图】相关推荐

html 运行css实现3D正方体旋转制作进阶，调整图大小及远近（二）
css中的transform 1.通过其中的scale调整大小 2.通过translatez.translatex translatey调整远近.
用Canvas画布展示出3D效果的网页源码
大家好,今天给大家介绍一款,用Canvas画布展示出3D效果的网页源码(图1).送给大家哦,获取方式在本文末尾. 图1 每次点击页面中间的卡片,就会触发3d旋转特效(图2) 图2 源码预览, < ...
表白代码抖音很火的卡通H5动态表白源码HTML+CSS，七夕情人节代码，520代码
作品介绍查看更多关于抖音的文章很火的卡通H5动态表白源码,搭起来发给你心爱的人向她表白吧纯html的源码,上传就可以打开使用啦! 用代码编辑器或记事本打开可修改你要表白的内容.名字等效果图 ...
HTML网页设计期末课程大作业 ~中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码...
HTML网页设计期末课程大作业 ~ 中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
HTML网页设计期末课程大作业 ~中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码
HTML网页设计期末课程大作业 ~ 中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
HTML期末作业课程设计期末大作业——体育排球5页面带注册HTML+CSS+JS(学生网页设计作业源码)...
HTML期末作业课程设计期末大作业--体育排球5页面带注册HTML+CSS+JS(学生网页设计作业源码) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
HTML5期末大作业：个人网站设计——彭于晏明星(15页)带特效带登录带轮播带音乐 HTML+CSS+JavaScript 大学生毕设网页设计源码HTML (1)
HTML5期末大作业:个人网站设计--彭于晏明星(15页)带特效带登录带轮播带音乐 HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品 ...
HTML期末作业课程设计期末大作业——体育排球5页面带注册HTML+CSS+JS(学生网页设计作业源码)
HTML期末作业课程设计期末大作业--体育排球5页面带注册HTML+CSS+JS(学生网页设计作业源码) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
HTML5期末大作业：个人网站设计——彭于晏明星(15页)带特效带登录带轮播带音乐 HTML+CSS+JavaScript 大学生毕设网页设计源码HTML
HTML5期末大作业:个人网站设计--彭于晏明星(15页)带特效带登录带轮播带音乐 HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品 ...

CSS实现3D正方体动态旋转效果【源码+GIF图】

CSS实现3D正方体动态旋转效果【源码+GIF图】相关推荐

最新文章

热门文章