css3D动画

Bamboy 发布于2019-08-02 11:14 / 1473人阅读

摘要：动画前言最近玩了玩用来构建效果，写了几个，所以博客总结一下。写一个简单的立方体我们先用实现一个长方体，一个长方体有个边，我们写个，并用一个包裹起来根据我写动画的经验，最好有一个父元素来包裹先给设置宽高，并且给他设置视距和基点位置。

css3D动画 前言

最近玩了玩用css来构建3D效果，写了几个demo，所以博客总结一下。在阅读这篇博客之前，请先自行了解一下css 3D的属性，例如：transform-style，transform-origin，transform, perspective。

写一个简单的立方体

1、我们先用css实现一个长方体，一个长方体有6个边，我们写6个li，并用一个ul包裹起来,根据我写3D动画的经验，最好有一个父元素来包裹

2、先给.parent设置宽高，并且给他设置视距和基点位置。

.parent{
            width: 800px;
            height: 400px;
            border: 1px solid #000;
            margin: 0 auto;
            perspective: 2000px;
            perspective-origin: -40% -80%;
            background: #000;
        }

3、给ul设置宽高以及preserve-3d属性保留子元素3d转换，子元素li全部绝对定位

        ul{
            width: 50px;
            position: relative;
            margin: 100px auto;
            transform-style : preserve-3d;
        }
         li{
            width: 100px;
            height: 100px;
            background:  rgba(255, 255, 0, 0.3);
            position: absolute;
            text-align: center;           
            border: 3px solid greenyellow;
        }

效果如下图所示：

4、先写一个面，给他的背景设置 background: rgba(255, 255, 0, 0.3);

 li:nth-child(1){
            background:  rgba(255, 255, 0, 0.3);
            transform:  translateY(50px) rotateX(90deg);
        }

效果如下图所示：

5、我们写好了第一个面，然后我们在将其他6个面调整好，变成下图所示。关于rotate的旋转方向这里不解释，不懂的朋友可以自行查看其他文档。

        /*上面*/
         li:nth-child(1){
            transform: translateY(-50px) rotateX(90deg);
        } 
        /*下面*/
        li:nth-child(2){
        
            transform:  translateY(50px) rotateX(90deg);
        }
        /*左面*/
        li:nth-child(3){
            transform: translateX(-50px) rotateY(90deg);
        }
        /*右面*/
        li:nth-child(4){
            transform: translateX(50px) rotateY(90deg);
        }
        /*前面*/
        li:nth-child(5){
            transform: translateZ(50px);
        }
        /*后面*/
        li:nth-child(6){
            transform: translateZ(-50px);
        }

效果如下图所示：

下面是一些我写的css3D+动画的效果 demo01

代码如下：

效果如下图：

demo02

代码如下：

效果如下图：

持续更新，欢迎大家指教！

云服务器混合云 css3d 动画疯前端动画切换动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52863.html

css3D动画

摘要：动画前言最近玩了玩用来构建效果，写了几个，所以博客总结一下。写一个简单的立方体我们先用实现一个长方体，一个长方体有个边，我们写个，并用一个包裹起来根据我写动画的经验，最好有一个父元素来包裹先给设置宽高，并且给他设置视距和基点位置。 css3D动画前言最近玩了玩用css来构建3D效果，写了几个demo，所以博客总结一下。在阅读这篇博客之前，请先自行了解一下css 3D的属性，例如...

Cobub 2019-08-29 16:23 评论0 收藏0
css3D动画

摘要：前言本篇文章给大家带来的内容是关于实现动画特效的代码实例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。前言本篇文章给大家带来的内容是关于css实现3d动画特效的代码实例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。属性 perspective ：透距离，单位像素（值越小，透视距离越近，效果越明显）：设置父元素上 perspective-orig...

LittleLiByte 2019-08-30 11:10 评论0 收藏0
css3D动画

摘要：前言本篇文章给大家带来的内容是关于实现动画特效的代码实例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。前言本篇文章给大家带来的内容是关于css实现3d动画特效的代码实例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。属性 perspective ：透距离，单位像素（值越小，透视距离越近，效果越明显）：设置父元素上 perspective-orig...

Godtoy 2019-08-05 17:17 评论0 收藏0
H5打造3d场景不完全攻略（一）: H5 3d表现形式

摘要：前言日前，造物节放肆地火了一把。作为一个叙事性的，它的场景和动效全部基于代码实现，而抛弃了视频这种方式。但它与用户的交互比较少，因而并不能直观体现出这是完全基于代码实现的。很好地为我们诠释了，以变换打造亦不是为一种明智的低成本的实现方式。前言日前，taobao造物节H5放肆地火了一把。相信接下来将3d嵌入网站的这种营销方式会被越来越多的人留意到。工作之余体验了若干个3d H5页面，...

habren 2019-08-05 09:59 评论0 收藏0
值得看看，2019 年 11 个受欢迎的 JavaScript 动画库！

摘要：超过的星星，是一个动画库，可以处理属性，单个转换，或任何属性以及对象。超过星星，这个动画库大小只有。超过星星，这个库基允许你以选定的速度为字符串创建打字动画。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ 1.Three.js showImg(https://segmentfault.com/img/bVbkQ4X?w=551&h=358); 超过46K的星星，...

浠ラ箍 2019-08-23 13:59 评论0 收藏0