首页 > 开发 > CSS > 正文

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

2024-07-11 08:33:16

字体：大中小

来源：转载

供稿：网友

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

CSS Code复制内容到剪贴板

<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>

首先，一个静态的立方体

CSS Code复制内容到剪贴板

.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); }

让立方体转起来

CSS Code复制内容到剪贴板

.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实现立方体自转效果的全部内容就给大家介绍完了，希望对大家有所帮助！

上一篇：基于DOM+CSS3实现OrgChart组织结构图插件

下一篇：CSS3中几个新增加的盒模型属性使用教程

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注