汇总之--css3 transition,transform2d-3d

个人博客
如有错误请指正谢谢大家

transition

  • 基本写法
            /* 过渡属性 可以指定 某一个 或者某一些 如果想要所有的都能够过渡 使用all即可 */
     transition-property: width,height; 
            /* 持续时间 */
        transition-duration: 2s;
            /* 延迟时间 */
        transition-delay: 1s,2s;
            /* 过渡的动画线型
                linear
                ease-in
                ease-out
                ...
                实际开发的时候 不会使用transition来制作 太长的动画效果 所以 使用默认的即可
                ease
             */
             transition-timing-function: ease; 
需要注意的一点是,不要使用all,如果是指定就指定是height或者别的属性,可以优化性能
  • 复合写法
 transition: width 1s 1s linear, 
         height 1s 2s ease,background-color 1s 3s; 

transform2d

  • translateX() translateY()
transform: translate(10px, 20px) */
transform: translateX(20px) translateY(20px);
  • rotate()
transform: rotate(360deg);
  • scale()
/* 
scaleX
scaleY用法类似于 上面的移动
*/
transform: scale(.5, .5);
  • skew()
transform: skew(0,45deg );

tansform 3d

  • 判断方向的方法:
        x轴:从左往右
        y轴:从上往下
        z轴:从里向外;

        旋转方向的判断 左手定则
        大拇指 指向 旋转的 那个轴的方向 
        剩余的四根手指 弯曲的方向 就是旋转的方向

        为了能够有 3d的 一个透视效果 需要为 旋转对象的 父元素 添加 透视属性

        透视属性
            设置的是 3d变换的元素 距离 浏览器的 距离

        沿着Z轴缩放 看不出效果
.container{
            border: 1px solid gray;
            overflow: hidden;

            /*  距离 浏览器 的距离  */
            perspective: 1000px;


        }
  • transform-style: preserve-3d
    如果需要有3d的视觉,还需要添加transform-style: preserve-3d;

  • transform-origin: left center
    这是控制transform变换的圆点

小技巧:

在3d中有时候需要看不到背面:

        /* 设置 反面看不到 */
            backface-visibility: hidden;

demo:3d小盒子效果

TYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        body{
            /* 希望 3d效果明显一点 可以设置的小一些 越大 越不明显 */
            perspective: 500px;
        }
        .box{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            border: 1px solid gray;
            position: relative;
            transition: all 1s;

            /* 将 3d变换的 父元素 添加一个属性 即可看到 3d的变换效果 */
            transform-style: preserve-3d;
        }
        .box .item{
            width: 100%;
            height: 100%;
            font-size: 150px;
            text-align: center;
            line-height: 200px;
            font-weight: 900;
            position: absolute;
        }
        .item:nth-child(1){
            background: orange; 
            transform: rotateY(0deg) translateZ(100px);
        }
        .item:nth-child(2){
            background: red;
            transform: rotateY(180deg) translateZ(100px);   
        }
        .item:nth-child(3){
            background: blue;
            transform: rotateY(90deg) translateZ(100px);        
        }
        .item:nth-child(4){
            background: pink;
            transform: rotateY(-90deg) translateZ(100px);       
        }
        .item:nth-child(5){
            background: green;
            transform: rotateX(90deg) translateZ(100px);        
        }
        .item:nth-child(6){
            background: yellowgreen;
            transform: rotateX(-90deg) translateZ(100px);       
        }

        /* 设置过渡效果 */
        .box:hover{
            transform: rotateX(450deg) rotateY(450deg);
        }
    style>
head>
<body>
    <div class="box">
        <div class="item">1div>
        <div class="item">2div>
        <div class="item">3div>
        <div class="item">4div>
        <div class="item">5div>
        <div class="item">6div>
    div>
body>
html>

你可能感兴趣的:(方法汇总)