摘要：动画前言最近玩了玩用来构建效果，写了几个，所以博客总结一下。写一个简单的立方体我们先用实现一个长方体，一个长方体有个边，我们写个，并用一个包裹起来根据我写动画的经验，最好有一个父元素来包裹先给设置宽高，并且给他设置视距和基点位置。
css3D动画 前言
最近玩了玩用css来构建3D效果，写了几个demo，所以博客总结一下。 在阅读这篇博客之前，请先自行了解一下css 3D的属性，例如：transform-style，transform-origin，transform, perspective。
写一个简单的立方体
1、我们先用css实现一个长方体，一个长方体有6个边，我们写6个li，并用一个ul包裹起来,根据我写3D动画的经验，最好有一个父元素来包裹2、先给.parent设置宽高，并且给他设置视距和基点位置。
- 1
- 2
- 3
- 4
- 5
- 6
.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;
}
效果如下图所示：
li:nth-child(1){
background: rgba(255, 255, 0, 0.3);
transform: translateY(50px) rotateX(90deg);
}
效果如下图所示：
/*上面*/
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);
}
效果如下图所示：
代码如下：
书页2
效果如下图：
代码如下：
立方体
效果如下图：
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113708.html
摘要：前言本篇文章给大家带来的内容是关于实现动画特效的代码实例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 前言 本篇文章给大家带来的内容是关于css实现3d动画特效的代码实例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 属性 perspective ：透距离，单位像素（值越小，透视距离越近，效果越明显）：设置父元素上 perspective-orig...
摘要：超过的星星，是一个动画库，可以处理属性，单个转换，或任何属性以及对象。超过星星，这个动画库大小只有。超过星星，这个库基允许你以选定的速度为字符串创建打字动画。 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ 1.Three.js showImg(https://segmentfault.com/img/bVbkQ4X?w=551&h=358); 超过46K的星星，...
阅读 2651·2021-11-24 09:38
阅读 1964·2019-08-30 15:53
阅读 1159·2019-08-30 15:44
阅读 3196·2019-08-30 14:10
阅读 3555·2019-08-29 16:29
阅读 1775·2019-08-29 16:23
阅读 1082·2019-08-29 16:20
阅读 1447·2019-08-29 11:13
