zoukankan      html  css  js  c++  java
  • css3 3d转换

    <!DOCTYPE html>
    <html>
    <head>
    <title>3D转换</title>
    <style type="text/css">
    .box{
    400px;
    height: 400px;
    margin: 100px auto;
    position: relative;
    /*transform-style:preserve-3d代表设置其子元素保留3d效果
    默认值是flat即默认不保留子元素的3d效果
    transform-style只能设置在父元素上因为这个属性不能被继承*/
    transform-style: preserve-3d;
    transform: rotateY(85deg);
    }
    img:nth-child(1){
    400px;
    height: 400px;
    }
    img:nth-child(2){
    150px;
    height: 200px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    opacity: .3;
    }
    img:nth-child(3){
    150px;
    height: 200px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    /*rotateZ()代表绕Z轴进行旋转
    Z轴就是面向我们的那个轴
    scaleZ Z轴缩放不会加厚*/
    /*transform: rotateZ(40deg);*/
    /**/
    /*transform: scaleZ(2) rotateX(90deg);*/
    /*scale3d()可以写三个参数第一个参数代表的是x轴的缩放 第二个代表的是y轴的缩放 第三个代表的是z轴的缩放*/
    /*transform: scale3d(2,.5,1);*/
    /*translateZ代表在Z轴上的平移 可以为负值*/
    /*translate3d()可以设置在xyz轴上的偏移*/
    transform: translate3d(10px,40px,100px);
    /*skew没有Z*/

    }
    </style>
    </head>
    <body>
    <div class="box">
    <img src="img/bg-grid.jpg">
    <img src="img/cardKingClub.png">
    <img src="img/cardKingClub.png">
    </div>
    </body>
    </html>

  • 相关阅读:
    php趣题小记
    git常用语法
    Go 使用小记
    小程序 显示对话框 确定-取消
    小程序 后退一页
    Vue脚手架使用步骤 2.9.6版本
    小程序 后台返回的对象数组(每个数组添加一个新的属性值)
    小程序 添加对象
    小程序图表wx-chart
    微信小程序之自定义select下拉选项框组件
  • 原文地址:https://www.cnblogs.com/adialike/p/6388933.html
Copyright © 2011-2022 走看看