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. simhash文本相似度比较

    simhash 在simhash中处理一个文本的步骤如下: 第一步,分词: 对文本进行分词操作,同时需要我们同时返回当前词组在文本内容中的权重(这基本上是目前所有分词工具都支持的功能). 第二步,计算 ...

  2. Support Vector Machine(3)：Soft Margin 平衡之美

    很多材料上面讲道“引入Soft Margin的原因是因为数据线性不可分”,个人认为有些错误,其实再难以被分解的数据,如果我们用很复杂的弯弯绕曲线去做,还是可以被分解,并且映射到高维空间后认为其线性可分 ...

  3. git报错-Initial commit Untracked files nothing added to commit but untracked ……

    文章转自 https://www.jianshu.com/p/61c3db30d488 在目标执行命令 git stratus 报错 根据上面的文章,可以解决问题.不行的话,请留言. 感谢你的阅读

  4. 01 - Jmeter4.x环境安装以及简单使用

    Jmeter 介绍 Apache JMeter应用程序是开源软件,旨在为负载测试功能行为和测量性能的100%纯Java应用程序.它最初是为测试Web应用程序而设计的,但后来扩展到其他测试功能 常用压力 ...

  5. Spring自动装配之依赖注入(DI)

    依赖注入发生的时间 当Spring IOC 容器完成了Bean 定义资源的定位.载入和解析注册以后,IOC 容器中已经管理类Bean定义的相关数据,但是此时IOC 容器还没有对所管理的Bean 进行依 ...

  6. echarts之折线图介绍及使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. python常用模块---collections、time、random、os、sys、序列号模块

    collections模块 在内置数据类型(dict.list.set.tuple)的基础上,collections模块还提供了几个额外的数据类型:Counter.deque.defaultdict. ...

  8. Redis在windows下的环境搭建

    Redis在windows下的环境搭建 下载windows版本redis,,官方下载地址:http://redis.io/download, 不过官方没有Windows版本,官网只提供linux版本的 ...

  9. CentOS7 SSH 密码正确，但仍提示“Permission denied”

    我看其他人解决办法,有的是防火墙端口,有的是sshd_config文件的密码登录,有的ip冲突等等,我都按照那些修改了,但是都不通,最后修改了这个,好用了. 看一下SElinux,敲sestatus, ...

  10. Spark 读取HBase数据

    Spark1.6.2 读取 HBase 1.2.3 //hbase-common-1.2.3.jar //hbase-protocol-1.2.3.jar //hbase-server-1.2.3.j ...