基于CSS3实现立方体自转效果

作者：佚名字体：[增加减小] 来源：互联网时间：2017-08-06

本文主要包含css3立方体,css3立方体自转等相关知识,佚名希望在学习及工作中可以帮助到您

先是HTML 一个父div包含四个绝对定位的div

<div class='container container--realistic'>
<div class='cube cube--ani'>
<div class='face'>1</div>
<div class='face'>2</div>
<div class='face'>3</div>
<div class='face'>4</div>
</div>
</div>

首先，一个静态的立方体

.face:nth-child() {
-webkit-transform: /*rotateY(deg)*/ translateZ(.em /* half the side length, em in this case */);
}
.face:nth-child() {
-webkit-transform: rotateY( deg) translateZ(.em);
}
.face:nth-child() {
-webkit-transform: rotateY(deg) translateZ(.em);
}
.face:nth-child() {
-webkit-transform: rotateY(deg) translateZ(.em);
}

让立方体转起来

.cube--ani {
-webkit-animation: rot s linear infinite;
}
@-webkit-keyframes rot {
to { -webkit-transform: rotateY(-deg) rotateX(deg); }
}

这里定义了一个动画 rot
从起始位置转动到 Y轴-330deg X轴370deg
并且循环无限次，每次4s
基于CSS3实现立方体自转效果的全部内容就给大家介绍完了，希望对大家有所帮助！

您可能想查找下面的文章:

相关文章

2017-08-06css网站布局实录学习笔记第三部分网页布局与定位
2018-11-02css实现多行文字截断效果
2017-08-06纯CSS实现的滑动的可折叠菜单
2017-08-06关于css设置层透明
2017-08-06纯css多种方法实现div中单行文字、多行文字及嵌套div垂直水平居中
2017-08-06浅谈CSS中的OOCSS编程方式
2017-08-06深入剖析CSS中的线性渐变linear-gradient
2017-08-06CSS网页实例利用box-sizing实现div仿框架结构实现代码
2017-08-06IE中伪类hover的使用及BUG
2017-08-06纯css3(无图片/js)制作的几个社交媒体网站的图标