css3D动画

前言

最近玩了玩用css来构建3D效果，写了几个demo，所以博客总结一下。 在阅读这篇博客之前，请先自行了解一下css 3D的属性，例如：transform-style，transform-origin，transform, perspective。

写一个简单的立方体

1、我们先用css实现一个长方体，一个长方体有6个边，我们写6个li，并用一个ul包裹起来,根据我写3D动画的经验，最好有一个父元素来包裹

<div class="parent">

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

    </ul>

</div>

2、先给.parent设置宽高，并且给他设置视距和基点位置。

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

        }

效果如下图所示：

4、先写一个面，给他的背景设置 background: rgba(255, 255, 0, 0.3);

 li:nth-child(1){

            background:  rgba(255, 255, 0, 0.3);

            transform:  translateY(50px) rotateX(90deg);

        }

效果如下图所示：

5、我们写好了第一个面，然后我们在将其他6个面调整好，变成下图所示。关于rotate的旋转方向这里不解释，不懂的朋友可以自行查看其他文档。

        /*上面*/

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

        }

效果如下图所示：

下面是一些我写的css3D+动画的效果

demo01

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>书页2</title>

    <style>

        .container{

            width: 1000px;

            height: 650px;

            background: #000;

            perspective: 2000px;

            border: 1px solid transparent;

            overflow: hidden;

            margin: 0 auto;

            perspective-origin: 10% 20%;

        }

        .cube{

            width: 200px;

            height: 300px;

            transform-style: preserve-3d;

            margin:100px auto;

            position: relative;

            transform: rotateX(30deg);

            border-radius: 50%;

            padding: 60px;

        }

        .mian{

            width: 200px;

            height: 300px;

            background-image: url(1.jpg);

            background-position:400px 0;

            position: absolute;

            border: 1px solid #ccc;

            transition: 2s;

        }

        /* .mian1:hover{

            transform-origin: right;

            transform: rotateY(-60deg);

        } */

        .mian1{

            transform-origin: right;

            transform: translateX(-200px) rotateY(45deg);

            background-position: 0 0;

        }

        .mian3{

            transform-origin: left;

            transform: translateX(200px) rotateY(45deg);

            background-position: 200px 0;

        }

        .mian3:hover{

            transform: translateX(200px) rotateY(0deg);

        }

        .mian1:hover{

            transform: translateX(-200px) rotateY(0deg);

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="cube">

            <div class="mian mian1"></div>

            <div class="mian mian2"></div>

            <div class="mian mian3"></div>

        </div>

    </div>

</body>

</html>

效果如下图：

demo02

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>立方体</title>

    <style>

        *{

            margin: 0;

            padding: 0;

            list-style: none;

        }

        .parent{

            width: 1000px;

            margin:  0 auto;

            height: 600px;

            background: black;

            perspective: 5000px;

            perspective-origin: -40% -120%;

            border: 1px solid #000;

        }

        ul{

            width: 100px;

            height: 300px;

            position: relative;

            margin:100px auto;

            transform-style: preserve-3d;

            animation: zuan 3s linear infinite;

            border: 1px solid greenyellow;

        }

        li{

            width: 100px;

            height: 300px;

            background:  rgba(0, 0, 0, 0.5);

            position: absolute;

            text-align: center;

            line-height: 100px;

            border: 3px solid greenyellow;

        }

        li:nth-child(1){

            transform: rotateY(30deg) translateZ(-200px);

        }

        li:nth-child(2){

            transform: rotateY(60deg) translateZ(-200px);

            background:  rgba(255, 0, 0, 0.5);

        }

        li:nth-child(3){

            transform: rotateY(90deg) translateZ(-200px);

        }

        li:nth-child(4){

            transform: rotateY(120deg) translateZ(-200px);

            background:  rgba(0, 0, 255, 0.5);

        }

        li:nth-child(5){

            transform: rotateY(150deg) translateZ(-200px);

        }

        li:nth-child(6){

            transform: rotateY(180deg) translateZ(-200px);

            background:  rgba(255, 0, 255, 0.5);

        }

        li:nth-child(7){

            transform: rotateY(210deg) translateZ(-200px);

        }

        li:nth-child(8){

            transform: rotateY(240deg) translateZ(-200px);

            background:  rgba(0, 255, 0, 0.5);

        }

        li:nth-child(9){

            transform: rotateY(270deg) translateZ(-200px);

        }

        li:nth-child(10){

            transform: rotateY(300deg) translateZ(-200px);

            background:  rgba(0, 255, 255, 0.5);

        }

        li:nth-child(11){

            transform: rotateY(330deg) translateZ(-200px);

        }

        li:nth-child(12){

            transform: rotateY(360deg) translateZ(-200px);

            background:  rgba(255, 255, 255, 0.5);

        }

        @keyframes zuan{

            0%{

                transform: rotateY(0deg);

            }

            100%{

                transform: rotateY(360deg);

            }

        }

    </style>

</head>

<body>

    <div class="parent">

        <ul>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

    </div>

</body>

</html>

效果如下图：

持续更新，欢迎大家指教！

css3D动画的更多相关文章

  1. CSS3D动画制作一个3d旋转的筛子

    希望这个demo能让大家理解CSS3的3d空间动画(其实是个假3D) 首先给一个3d的解剖图,x/y/z轴线轴线已经标出 下面附上添加特效的动画旋转 可以根据demo并参考上面解剖图进行理解 < ...

  2. CSS-3D动画笔记

    3D 在2d的基础上添加 z 轴的变化 3D 位移:在2d的基础上添加 translateZ(),或者使用translate3d() translateZ():以方框中心为原点,变大 3D 缩放:在2 ...

  3. CSS3实现小黄人动画

    转载请注明出处,谢谢! 每次看到CSS3动画就心痒痒想试一下,记得一个多月前看了白树哥哥的一篇博客,突然开窍,于是拿他提供的demo试了一下,感觉很棒!下图为demo提供的动画帧设计稿. 自己也想说搞 ...

  4. Bootstrap中的less基础

    在线编译 因为 less 的语法毕竟相对简单,所以一些在线工具可以很轻松的做到.比如 http://less.cnodejs.net http://www.ostools.net/less  一般都有 ...

  5. css3-d ，动画，圆角

    一.3D 开启元素3D transform-style: preserve-3d; Z轴 正数 屏幕外,反之屏幕内 近大远小 perspective: length (必须大于等于0) -- 在3D元 ...

  6. 简单的转盘抽奖——CSS动画优化

    前言 前两天去一家公司面试,被问到一些小游戏的东西.面试官提到了刷红包还有抽奖这些怎么实现,当时简单说了下思路,回来之后想想还是说的太轻描淡写了,干说不做就是耍流氓,所以就做了一个(Demo & ...

  7. CSS3D效果

    效果如本博客中右边呢个浅色框框,来自webpack首页(IE绕路0_0) github地址:http://wjf444128852.github.io/demo02/css3/css3d/ 思路: 1 ...

  8. css3D的魅力

    前言: 最近玩了玩用css来构建3D效果,写了几个demo,所以博客总结一下.  在阅读这篇博客之前,请先自行了解一下css 3D的属性,例如:transform-style,transform-or ...

  9. 学习笔记 第十四章 使用CSS3动画

    第14章   使用CSS3动画 [学习重点] 设计2D动画 设计3D动画 设计过渡动画 设计帧动画 能够使用CSS3动画功能设计页面特效样式 14.1  设计2D动画 CSS2D Transform表 ...

随机推荐

  1. org.w3c.dom。 XML解析 练习

    HTML文档 1 import javax.xml.parsers.DocumentBuilder; import javax.xml.parsers.DocumentBuilderFactory; ...

  2. CSS实现背景图片屏幕自适应

    在做登陆页面等的首页的时候,经常会遇到需要放一张背景大图的情况,并且需要图片按比例缩放,来适应不同屏幕的大小. html代码如下: <!DOCTYPE html> <html lan ...

  3. datepart()函数的使用

    /* datepart()函数的使用                           * datepart()函数可以方便的取到时期中的各个部分 *如日期:2006-07--02 18:15:36 ...

  4. [洛谷P1552] [APIO2012]派遣(左偏树)

    这道题是我做的左偏树的入门题,奈何还是看了zsy大佬的题解才能过,唉,我太弱了. 左偏树总结 Part 1 理解题目 很显然,通过管理关系的不断连边,最后连出来的肯定是一棵树,那么不难得出,当一个忍者 ...

  5. 攻防世界--csaw2013reversing2

    测试文件:https://adworld.xctf.org.cn/media/task/attachments/3f35642056324371b913687e770e97e6.exe 1.准备 打开 ...

  6. 修改DbVisualizer的默认快捷键 .

    修改SQL提示的步骤如下:1, 编辑dbvis.jar包下的dbvis-actions.xml文件(解压或直接修改)2, 找到以下的代码<actionidref="show-auto- ...

  7. turtle库使用

    turtle库的使用 绘图窗体布局 turtle.setup(width,height,startx,straty) 用来控制窗体的大小与位置,其中后width与height用来控制窗体的大小,sta ...

  8. 什么是VPX技术？

    北京太速科技有限公司 自主研发VPX板卡  http://www.orihard.com/ 欢迎关注 新型VPX(VITA 46)标准是自从VME引入后的25年来,对于VME总线架构的最重大也是最重要 ...

  9. mysql的一些基本常识

    1.主键的选取 主键的字段不能有null存在 主键应该使用bigint自增,而不是int 主键的选取默认为id 联合主键:就是多个字段被设置为主键,这里主键字段的值是允许相同的,只要不是所有字段相同即 ...

  10. ansible笔记（三）--模块讲解

    ansible 常用命令 ansible-doc ansible-playbook ansible-vault ansible-console ansible-galaxy ansible-pull ...