zoukankan      html  css  js  c++  java
  • transform3d

    transform3d和2d的区别

    1、3d多了一个参数

    2、在移动端使用3d转换可以优化性能(如果移动设备有3d加速引擎 GPU ,可以提高性能)

    一、rotate3d

    rotateX(x轴旋转),rotateY(y轴旋转),rotateZ(z轴旋转)

                          

        (X轴旋转)                               (Y轴旋转)                                       (Z轴旋转)

    二、perspective(透视)

    - 透视原理: 近大远小 。
    - 浏览器透视:把近大远小的所有图像,透视在屏幕上。
    - perspective:视距,表示视点距离屏幕的长短。视点,用于模拟透视效果时人眼的位置

     - perspective 一般作为一个属性,设置给父元素,作用于所有3D转换的子元素

    比如给父元素设置perspective为201

    子元素的transpaleZ()离201越近时就越大,到达200时满屏,超过201时消失(当一个东西超过了可视点,意味着在它你后面,眼睛是看不见后面的东西的)

    开门的小例子

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <style>
                .door{
                  border: 1px solid #ccc;
                   300px;
                  height: 300px;
                  margin: 100px auto;
                  perspective:1000px;
                }
                .left{
                  float: left;
                   50%;
                  height: 100%;
                  background-color: yellow;
                  transform-origin:left center;
                  transition:transform 1s linear;
                }
                .right{
                  display: inline-block;
                   50%;
                  height: 100%;
                  background-color: red;
                  transform-origin:right center;
                  transition:transform 1s linear;
                }
                .door:hover .left{
                  transform:rotateY(60deg);
                }
                .door:hover .right{
                  transform:rotateY(-60deg);
                }
            </style>
        </head>
        <body>
          <div class="door">
            <div class="left"></div>
            <div class="right"></div>
          </div>
        </body>
    </html>
    

      

    注:个人笔记,参考:https://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

  • 相关阅读:
    加强面向对象设计思想需要学习的知识
    (转载)myeclipse快捷键
    tomcat的jdbc驱动
    mysql常见设置
    不用配制数据源如何用JDBC连接access数据库
    关于updatePanel
    jsp常见问题
    Servlet问题
    Rational Rose未找到suite objects.dll问题
    jsp+servlet+javabean实现简单的查询
  • 原文地址:https://www.cnblogs.com/hxblogs/p/13194661.html
Copyright © 2011-2022 走看看