css3D动画

LittleLiByte 发布于2019-08-30 11:10 / 3016人阅读

摘要：前言本篇文章给大家带来的内容是关于实现动画特效的代码实例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

前言

本篇文章给大家带来的内容是关于css实现3d动画特效的代码实例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

属性

perspective ：透距离，单位像素（值越小，透视距离越近，效果越明显）：设置父元素上

perspective-origin: 设置透视点的位置

transform-style :指定某元素的子元素是位于三维空间内，取值：flat | preserve-3d

一、写一个简单的立方体

1.一个长方体有6个面，我们写6个div，并用一个父元素包裹起来。

2.给.mofang设置宽高，并给他设置视距和透视点位置，preserve-3d属性保留子元素3d转换

.mofang{
    width: 100px;
    height: 100px;
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);

    perspective: 3000px;
    perspective-origin:-100% -150%;
    transform-style: preserve-3d;
}

注：视距越小图形越大，反之越小

3.子元素全部绝对定位

.box{
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-size: 20px;
    font-weight: bold;
    border: 2px solid black;
    position: absolute;            
}

4.开始调整6个子元素的位置

.mian1{
     background:  rgba(255, 255, 0, 0.3);
    transform:  translateY(50px) rotateX(90deg);
}

效果图如下：

5.一个面写好之后，将其余的面都调整好

/*后*/
.mian1{
    transform: translateZ(-50px);
}
/*上*/
.mian2{
    transform: translateY(-50px) rotateX(90deg);
}
/*左*/
.mian3{
    transform: translateX(-50px) rotateY(90deg);
}
/*前*/
.mian4{
    transform: translateZ(50px);
}
/*右*/
.mian5{
    transform: translateX(50px) rotateY(90deg);
}
/*下*/
.mian6{
    transform: translateY(50px) rotateX(90deg);
}

效果图如下：

css3D动画可以实现很多效果

下面是我写的一些3D动画效果

demo01

html

css

魔方效果

demo02

html

css

多重立体图

demo03

html

css

圆柱效果

demo04

html

css

齿轮效果

如果文中有不妥或者错误的地方还望高手的您指出，以免误人子弟。

如果您有更好的建议，不如留言一起讨论，共同进步！再次感谢您耐心的读完本篇文章。

vx:bsl521921

专线服务私有云 css3d 动画疯前端动画切换动画

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

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

css3D动画

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

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

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

Bamboy 2019-08-02 11:14 评论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