资讯专栏INFORMATION COLUMN

css3D动画

LittleLiByte / 3092人阅读

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

前言

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

属性

perspective :透距离,单位像素(值越小,透视距离越近,效果越明显):设置父元素上

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

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

一、写一个简单的立方体

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

1
2
3
4
5
6

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

1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9

css


魔方效果

demo02

html

1
2
3
4
5
6
7
8
9
10
11
12

css


多重立体图

demo03

html

1
2
3
4
5
6
7
8
9
10
11
12

css


圆柱效果

demo04

html

css


齿轮效果

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

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

vx:bsl521921

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

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

相关文章

  • css3D动画

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

    Cobub 评论0 收藏0
  • css3D动画

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

    Bamboy 评论0 收藏0
  • 值得看看,2019 年 11 个受欢迎的 JavaScript 动画库!

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

    浠ラ箍 评论0 收藏0

发表评论

0条评论

LittleLiByte

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<