zoukankan      html  css  js  c++  java
  • CSS 3D的应用记录


    为父元素添加以下样式后,子元素即可使用3D属性,例如translateZ
    /*设置子元素也应用3D效果*/
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;

    /*设置旋转角度*/
    -webkit-transform: rotateY(60deg);
    -moz-transform: rotateY(60deg);
    transform: rotateY(60deg);



    为元素直接设置3D属性时候,记得一定要设置摄像机的位置:perspective,否者translateZ不会生效。
    transform: perspective(1000px) translateZ(100px);


    如果要设置元素具有3D的效果,那么,要将摄像机假设到它的父元素上,以下设置是设置其摄像机距离多远看子元素。
    -webkit-perspective: 1400px;
    -moz-perspective: 1400px;
    perspective: 1400px;







  • 相关阅读:
    c++教程目录
    ANDROID教程目录
    ArrayBuffer
    读懂 ECMAScript 规格
    编程风格
    Module 的加载实现
    Module 的语法
    修饰器Decorator
    Class 的继承
    SQL Server 2008 R2导出数据脚本的方法
  • 原文地址:https://www.cnblogs.com/zijun/p/9951722.html
Copyright © 2011-2022 走看看