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

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

分类：CSS_CSS3 答疑 - 常见问题 · 发布时间：2022-06-03 15:46 · 阅读：5988

这篇文章主要介绍了基于CSS3实现立方体自转效果 的相关资料,需要的朋友可以参考下

先是HTML 一个父div包含四个绝对定位的div
CSS Code复制内容到剪贴板
  1. 'container container--realistic'>    
  2. 'cube cube--ani'>    
  3. 'face'>1
    
  • 'face'>2
    •     
  • 'face'>3
    •     
  • 'face'>4
    •     
    •     
  •    
    • 首先，一个静态的立方体
    CSS Code复制内容到剪贴板
    1. .face:nth-child() {    
    2. -webkit-transform: /*rotateY(deg)*/ translateZ(.em /* half the side length, em in this case */);    
    3. }    
    4. .face:nth-child() {    
    5. -webkit-transform: rotateY( deg) translateZ(.em);    
    6. }    
    7. .face:nth-child() {    
    8. -webkit-transform: rotateY(deg) translateZ(.em);    
    9. }    
    10. .face:nth-child() {    
    11. -webkit-transform: rotateY(deg) translateZ(.em);    
    12. }  
    让立方体转起来
    CSS Code复制内容到剪贴板
    1. .cube--ani {    
    2. -webkit-animation: rot s linear infinite;    
    3. }    
    4. @-webkit-keyframes rot {    
    5. to { -webkit-transform: rotateY(-deg) rotateX(deg); }    
    6. }  
    这里定义了一个动画 rot
    从起始位置转动到 Y轴-330deg X轴370deg
    并且循环无限次，每次4s
    基于CSS3实现立方体自转效果 的全部内容就给大家介绍完了，希望对大家有所帮助！
    标签：
    CSS3 立方体 立方体自转

    相关文章

    css3媒体查询中device-width和width的区别详解

    这篇文章主要介绍了css3媒体查询中device-width和width的区别详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

    CSS3媒体查询实现不同宽度的下不同内容的展示功能

    这篇文章主要介绍了CSS3媒体查询实现不同宽度的下不同内容的展示功能,本章节我们将为大家演示一些多媒体查询实例，需要的朋友可以参考下

    CSS3几种实现子容器水平垂直居中的方法

    本文有几种方法可以实现容器与子容器水平垂直居中，主要包括Flexbox布局，position绝对定位+transform，表格布局，具有一定的参考价值，感兴趣的可以了解一下

    css3实现文字首尾衔接跑马灯的示例代码

    这篇文章主要介绍了css3实现文字首尾衔接跑马灯的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

    CSS的浮动及清除浮动的5种方法介绍

    这篇文章主要为大家介绍了CSS的浮动及清除浮动的5种方法介绍，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    返回分类 返回首页