css3-立方体3d旋转动画

最新推荐文章于 2023-03-19 11:50:15 发布

github_34514750

最新推荐文章于 2023-03-19 11:50:15 发布

阅读量820

点赞数 1

分类专栏： css 文章标签： css3 动画

本文链接：https://blog.csdn.net/github_34514750/article/details/51862471

版权

1.准备六个面

div做出六个面，在同一个父级容器下
父级容器的transform-style:preserve-3d
六个div设置成绝对定位，重叠在一起

2.父元素做简单的变换

父元素用transform:rotate旋转

3.每个子页面做3D变换

每个子页面则用rotate旋转，和translate平移

4.父元素做动画

代码：
https://github.com/wanghuanweb/wanghuan.github.io/tree/master/css/css3%E5%8A%A8%E7%94%BB%E8%AE%BE%E8%AE%A1/%E7%AB%8B%E6%96%B9%E4%BD%933D%E6%97%8B%E8%BD%AC

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="index.css" rel="stylesheet">
    </head>

    <body>
        <div class="container">
              <div class="box box1">1</div>
              <div class="box box2">2</div>
              <div class="box box3">3</div>
              <div class="box box4">4</div>
              <div class="box box5">5</div>
              <div class="box box6">6</div>
        </div>
    </body>
</html>

*{
    margin: 0px;
    padding: 0px;
}

html,body{
    height: 100%;
    background: black;
}

.container

最低0.47元/天解锁文章

github_34514750

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3-立方体3d旋转动画

1.准备六个面div做出六个面，在同一个父级容器下父级容器的transform-style:preserve-3d 六个div设置成绝对定位，重叠在一起2.父元素做简单的变换父元素用transform:rotate旋转3.每个子页面做3D变换每个子页面则用rotate旋转，和translate平移4.父元素做动画代码： https://github.com/wanghuanweb/wangh
复制链接

扫一扫