zoukankan      html  css  js  c++  java
  • 【巩固】CSS3的3D动画 ——3D旋转(1)

    最近学了妙味的css3的动画,2D,3D的都有,先写一个最简单的3d翻转效果,鼠标移入div,正反面翻转效果。 
    注意点有:

    1. 要给正反面外面加个父级;
    2. transform-style: preserve-3d;是加在正反面的父级,使动画具有3d的效果;但是ie11并不支持preserve-3d
    3. perspective也要加在父级上,使动画具有透视效果;
    4. 要给父级也加上宽高,否则动画没有效果


    <style>
    #box{
    margin: 70px auto;
    width: 300px;
    height: 200px; //父级要加宽高,否则旋转基点会很离谱
    transform-style: preserve-3d; //preserve-3d加在父级上
    transform-origin: 50px 100px;
    transition: 0.3s linear;
    position: relative;
    perspective: 500px; //perspective也要加在父级上
    }
    #box div{
    width: 300px;
    height: 200px;
    font: 50px/100px arial;
    text-align: center;
    position: absolute;
    }
    #box div:nth-of-type(1){
    background: url(1.jpg);
    }
    #box div:nth-of-type(2){
    background: url(2.jpg);
    transform: translatez(1px);
    }
    #box:hover{
    transform: rotateY(180deg);
    }
    </style>
    <script>
    </script>
    </head>
    <body>
    <div id="box">
    <div>1</div>
    <div>2</div>
    </div>
    </body>
  • 相关阅读:
    Android控件之圆形Button
    MotionEvent常见值
    Android通过URL加载网络图片
    Android音频播放实例
    Android沉浸式任务栏的实现
    Android学习之路书籍推荐
    Linux端BaiduPCS-Go使用方法
    Remove Duplicates from Sorted ListII
    RemoveDuplicatesfromSortedList
    Partition List 划分链表
  • 原文地址:https://www.cnblogs.com/bluefantasy728/p/5617398.html
Copyright © 2011-2022 走看看