为了账号安全,请及时绑定邮箱和手机立即绑定
  • 使用transform-origin调整旋转中心:

    x轴:left,center,right

    y轴:top,center,bottom

    z轴:length px

  • 浏览器作为窗口,三维物体距离窗口的距离:

    webkit-perspective:800px

    视点,对应x轴,y轴:

    webkit-perspective-origin:50% 50%

    用webkit-transform-style:-webkit-preserve-3d告诉浏览器设置的是3D场景

    用transform属性调整元素:

    translate:

        translateX()translateY()translateZ()

    rotate:

        rotateX()rotateY()rotateZ()

  • transition :<过渡属性名称><过渡时间><过渡模式>

    过渡模式:transition-timing-function

    ease 缓慢开始,缓慢结束(默认)

    linear 匀速

    ease-in 缓慢开始

    ease-out 缓慢结束

    ease-in-out 缓慢开始缓慢结束(效果稍有不同)

  • safari、chrome用webkit-transition

    firefox用moz-transition

    opera用o-transition

  • 记录一下大神代码

    记录一下大神代码

    记录一下大神代码

    <!DOCTYPE html>

    <html>

    <head>

      <meta charset="UTF-8">

      <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

      <meta name="format-detection" content="telephone=no">

      <meta http-equid=“X-UA-Compatible” content=“IE=edge, chrome=1”>

      <title>正方体</title>

      <style>

     html

     {

          background: -webkit-radial-gradient(center, ellipse, #430d6d 0%, #000000 100%);

     background: radial-gradient(ellipse at center, #430d6d 0%, #000000 100%);

     height: 100%;

     }

     

        #window {

          width: 20em;

     height: 20em;

     position: absolute;

     left: 50%;

     top:50%;

     margin-left: -10em;

     margin-top: -10em;

     -webkit-perspective: 1000px;

     

     }

     

        #box{

          -webkit-animation: 6s spin linear infinite;

     position: absolute;

     width: 100%;

     height: 100%;

     -webkit-transform-style: preserve-3d;

     transform-style: preserve-3d;

     -webkit-transform: rotateX(-20deg) rotateY(-20deg);

     }

     

        .face {

          background: -webkit-linear-gradient(left, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), -webkit-linear-gradient(top, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);

     -webkit-background-size: 2.5em 2.5em;

     

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

     position: absolute;

     width: 100%;

     height: 100%;

     color: #77ffb9;

     box-shadow: inset 0 0 5em rgba(125, 125, 125, 0.8);

     }

     

        #face-front {

          transform: translateZ(10em);

     }

     

        #face-left {

          -webkit-transform: rotateY(-90deg) translateZ(10em);

     }

     

        #face-top {

          -webkit-transform: rotateX(90deg) translateZ(10em);

     }

     

        #face-right {

          -webkit-transform: rotateY(90deg) translateZ(10em);

     }

     

        #face-bottom {

          -webkit-transform: rotateX(-90deg) translateZ(10em);

     }

     

        #face-back {

          -webkit-transform: rotateX(180deg) translateZ(10em);

     }

     

     

        @-webkit-keyframes spin

     {

          from

     {

            -webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg);

     transform: translateZ(-10em) rotateX(0) rotateY(0deg);

     }

     

          to

     {

            -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);

     transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);

     }

        }

      </style>

    </head>

    <body>

    <div id="window">

      <div id="box">

        <div class="face" id="face-front">1</div>

        <div class="face hide" id="face-left">2</div>

        <div class="face hide" id="face-top">3</div>

        <div class="face hide" id="face-right">4</div>

        <div class="face hide" id="face-bottom">5</div>

        <div class="face hide" id="face-back">6</div>

      </div>

    </div>

     

    X:<input id="changex" type="range" name="" min="-100" max="100"

    onchange="ratate()"

    />

    <br>

    Y:<input id="changey" type="range" name="" min="-100" max="100" onmousemove="ratate()"

    />

    <script>

     function ratate()

      {

        var x = document.getElementById('changex').value;

     var y = document.getElementById('changey').value;

     document.getElementById('window').style.webkitPerspectiveOrigin =

          x+"% "+y+"%";

     }

    </script>

    </body>

    </html>


  • <!--此处有图片-->

    transition:<过渡属性名称> <过渡时间> <过渡模式> 过渡模式分为五种:ease(缓慢开始,缓慢结束),linear(匀速),ease-in(缓慢开始),ease-out(缓慢结束),ease-in-out(缓慢开始,缓慢结束,和ease稍有区别)

  • transform

        - translate    位移

        - rotate        旋转


    04:21
    看视频
首页上一页1234567下一页尾页

举报

0/150
提交
取消
课程须知
本课程适合有html、css基础知识的同学进阶学习
老师告诉你能学到什么?
如何使用CSS3来创建一个3D的动画效果
意见反馈 邀请有奖 帮助中心 APP下载
官方微信