css3+2D+3D

浏览器私有属性前缀

浏览器私有属性前缀是为了解决浏览器的兼容问题，当一个属性成为标准，并且被Firefox、Chrome等浏览器的最新版普遍兼容的时候就不再使用了

浏览器名称	内核	私有前缀
Chrome Safari	webkit	-webkit-
Firefox	gecko	-moz-
Opera	presto	-o-
IE	trient	-ms-

过渡效果

我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

CSS3 过渡(transition)是元素从一种样式逐渐改变为另一种的效果。

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性
transition-property	规定应用过渡的 CSS 属性的名称
transition-duration	定义过渡效果花费的时间。默认是 0
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"
transition-delay	规定过渡效果何时开始。默认是 0

2D效果

平移

语法：translate(x,y)可以为正值，也可以为负值

注意：尽量不要对元素被本身设置当前属性，否则元素会一直跳，原因：悬浮时元素的位置发生了变化

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: antiquewhite;
        transition: all 2s;
    }
    button:hover+div{
        transform: translate(300px,0);
    }
</style>
<button>鼠标悬浮</button>
<div></div>

旋转

语法transform:rotate

角度：单位deg

正值：顺时针旋转

负值：逆时针旋转

注意：inline行级元素是不能直接旋转的

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: antiquewhite;
        transition: all 2s;
    }
    button:hover+div{
        /* 旋转 */
        transform: rotate(360deg)
    }
</style>
<button>鼠标悬浮</button>
<div></div>

缩放 

语法：transform:scale(x,y)

x：表示x轴的缩放比例

y：表示y轴的缩放比例

x,y 值分别为原有元素宽高的倍数。 1为不缩放，大于1放大，小于1缩小

当括号内两个数相同时，可以只写一个值代替。 如果只想扩大x轴或者y轴，那么属性为scaleX(n)和scaleY(n) transform-origin 影响变换方向。

<style>
    img{
        transition: all 2s;
    }
    button:hover+img{
        /* 旋转 */
        transform: scale(0.5);
    }
</style>
<button>鼠标悬浮</button>
<img src="../images/1.jpg" alt="">

倾斜

语法：transform：skew(x-angle,y-angle)

该元素会以横向（X轴）和垂直（Y轴）为参考确定角度; 如果只想沿x轴或者y轴进行倾斜，那么属性为skewX(n)和skewY(n)

旋转中心点

任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。

在没有transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、缩放，扭曲等操作都是以元素自己中心位置进行变形。

动画效果

创建动画：@keyframes

调用动画：animation

参数值	效果
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0
animation-timing-function	规定动画的速度曲线。默认是 "ease"
animation-delay	规定动画何时开始。默认是 0
animation-iteration-count	规定动画被播放的次数（number类型）。默认是 1，（infinite: 无限次）
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal" ，‘alternate'
animation-play-state	规定动画是否正在运行或暂停。默认是 "running",'paused'
animation-fill-mode	规定对象动画时间之外的状态

3D效果

透视属性

给所有的子元素设置： perspective: 1000px;

给元素本身设置 ： transform: perspective(300px) rotateY(60deg) ;

定义3D元素的透视效果 (景深或视角)，（或者可以理解为： 设置从何处查看一个元素） 值越小，元素离视图越近，透视效果越明显，值越大，越远离视图，透视效果越不明显。

<style>
.box{
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 200px auto;
    transform:perspective(300px) rotateX(30deg);
}
</style>
<div class="box"></div>

透视效果可以添加给父元素 也可以 添加给子元素，区别在于： 给父元素： 子元素有共同的视角   给子元素，各个子元素有自已的视角

灭点位置

语法：perspective-origin : x轴 y轴;

可以使用的值：left，center，right，length，%；top，center，bottom

perspective-origin：改变视图角度（可理解为视线的方向），影响三维效果呈现。

坐标为当前元素的原点。和perspective结合使用。

可以使用当前元素改变透视元素的视图角度，默认的是x轴和y轴的中心点

<style>
.box{
    position: relative;
    width: 100px;
    height: 100px;
    margin: 50px;
    padding: 10px;
    border: 1px solid #f00;
    perspective: 150px;
    /* 将灭点位置定在左下角 */
    perspective-origin: left bottom;
}
.inner{
    width: 100px;
    height: 100px;
    background-color: yellow;
    transform: rotateX(30deg);
}
</style>
<div class="box">
    <div class="inner"></div>
</div>

是否为3D模型

语法：transform-style: flat|preserve-3d (preserve-3D |  flat 2d效果，默认);

transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素

需要设置在3D变换的父元素中，并且高于任何嵌套的变形元素。

如果你的父元素设置了transform-style值为preserve-3d，就不能为了防止子元素溢

<style>
.div1{
    position: relative;
    height: 200px;
    width: 200px;
    margin: 100px;
    padding:10px;
    border: 1px solid black;
}
.div2{
    padding:50px;
    width: 70px;
    position: absolute;
    border: 1px solid black;
    background-color: red;
    /* 让外层的div沿着y轴逆时针旋转60deg（后） */
    transform:perspective(500px) rotateY(10deg);
    -webkit-transform: perspective(500px) rotateY(10deg);
    /* 在 3D 空间中呈现被嵌套的元素 */
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.div3{
    padding:40px;
    position: absolute;
    border: 1px solid black;
    background-color: yellow;
    /* 让内层的div沿着y轴顺时针转-60deg（前） */
    transform:perspective(500px) rotateY(-60deg);
    -webkit-transform:perspective(500px) rotateY(-60deg);
}
</style>
<div class="div1">
    <div class="div2">hello 
        <div class="div3">world</div>
    </div>
</div>

设置变换中心

在3D效果中设置变换中心，2D中也是使用当前属性，3D中可以多设置一个值

语法：transform-origin : x轴 y轴 z轴;

注意：Z轴只能设置为像素值，不能用关键字

<style>
    .box {
        /* 给父元素设置透视属性，所有的子元素有公共的视角 */
        perspective: 1000px;
        border: 1px solid black;
        padding: 100px;
        width: 300px;
        height: 300px;
        margin: 100px auto;
        background: gray;
    }

    .box .inner {
        background-color: orange;
        width: 300px;
        height: 300px;
        transition: all 3s;
        /*语法： transform-origin:x,y,z */
        /* transform-origin:center center 0; 默认X轴中心旋转效果 */
        /* transform-origin:top center 0; 沿x轴顶部旋转 */
        /* transform-origin:bottom center 0; 沿X轴底部旋转 */
        /* 使用值 x为任意一个值都是沿x轴顶部旋转；当y轴的值也发生改变时才会移动旋转中心点*/
        transform-origin: 50px 0 0;
    }

    .box:hover .inner {
        /* 3D效果，沿着Y轴旋转360deg */
        transform: rotateX(360deg);
    }
</style>

<div class="box">
    <div class="inner">
    </div>
</div>

不面对屏幕是否可见

语法：backface-visibility: visible | hidden;

backface-visibility：定义元素在不面对屏幕时是否可见

<style>
.data2{
    width:100%; 
    position:relative; 
    overflow:hidden;
}
.data2 .pic2{
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
}
.data2 .row{
    width:185px;
    height:186px; 
    float:left; 
    margin: 48px;
    position:relative; 
    z-index:10;
}
.data2 .row .pic1{width:100%;height:100%; overflow:hidden;}
.data2 .row .pic2{width:100%;height:100%; overflow:hidden;}
.data2 .row .pic2 img{position:absolute;}
.data2 .image_container a .pic1{
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: all .4s ease-in-out;
}

.data2 .image_container a:hover .pic1{
    -webkit-transform:rotateY(180deg);
}

.data2 .image_container a .pic2{
    -webkit-transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: all .4s ease-in-out;
}

.data2 .image_container a:hover .pic2{
    -webkit-transform:rotateX(0deg) rotateY(0deg);
}

</style>
<div class="data2">
    <div class="image_container row">
      <a>
      <div class="pic1"><img src="index_a.png"></div>
      <div class="pic2"><img src="index_a.png"></div>
      </a>
    </div>
    <div class="image_container row">
      <a>
      <div class="pic1"><img src="index_b.png"></div>
      <div class="pic2"><img src="index_b.png"></div>
      </a>
    </div>
    <div class="image_container row">
      <a>
      <div class="pic1"><img src="index_c.png"></div>
      <div class="pic2"><img src="index_c.png"></div>
      </a>
    </div>
</div>

3D旋转

rotate3d(x,y,z,angle)  3D旋转

x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；

y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；

z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；

a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

3D缩放

语法;transform: scale3d（x,y,z）

x：x轴的缩放比例,

y：y轴的缩放比例,

z：z轴的缩放比例

立体旋转效果

<style>
        .center{
            width: 200px;
            height: 300px;
            position: relative;
            margin: 300px auto;
            transform-style: preserve-3d;
            perspective: 1000px;
        }
        img{
            width: 200px;
            height: 300px;
            position: absolute;
        }
        .center img:nth-child(1){
            animation: move1 5s linear infinite;
        }
        @-webkit-keyframes move1{
            0%{
                transform: rotateY(0) translateZ(300px);
            }
            100%{
                transform: rotateY(360deg) translateZ(300px);
            }
        }
        .center img:nth-child(2){
            transform: rotateY(40deg) translateZ(300px);
            animation: move2 5s linear infinite;
        }
        @-webkit-keyframes move2{
            0%{
                transform: rotateY(40deg) translateZ(300px);
            }
            100%{
                transform: rotateY(400deg) translateZ(300px);
            }
        }
        .center img:nth-child(3){
            transform: rotateY(80deg) translateZ(300px);
            animation: move3 5s linear infinite;
        }
        @-webkit-keyframes move3{
            0%{
                transform: rotateY(80deg) translateZ(300px);
            }
            100%{
                transform: rotateY(440deg) translateZ(300px);
            }
        }
        .center img:nth-child(4){
            transform: rotateY(120deg) translateZ(300px);
            animation: move4 5s linear infinite;
        }
        @-webkit-keyframes move4{
            0%{
                transform: rotateY(120deg) translateZ(300px);
            }
            100%{
                transform: rotateY(480deg) translateZ(300px);
            }
        }
        .center img:nth-child(5){
            transform: rotateY(160deg) translateZ(300px);
            animation: move5 5s linear infinite;
        }
        @-webkit-keyframes move5{
            0%{
                transform: rotateY(160deg) translateZ(300px);
            }
            100%{
                transform: rotateY(520deg) translateZ(300px);
            }
        }
        .center img:nth-child(6){
            transform: rotateY(200deg) translateZ(300px);
            animation: move6 5s linear infinite;
        }
        @-webkit-keyframes move6{
            0%{
                transform: rotateY(200deg) translateZ(300px);
            }
            100%{
                transform: rotateY(560deg) translateZ(300px);
            }
        }
        .center img:nth-child(7){
            transform: rotateY(240deg) translateZ(300px);
            animation: move7 5s linear infinite;
        }
        @-webkit-keyframes move7{
            0%{
                transform: rotateY(240deg) translateZ(300px);
            }
            100%{
                transform: rotateY(600deg) translateZ(300px);
            }
        }
        .center img:nth-child(8){
            transform: rotateY(280deg) translateZ(300px);
            animation: move8 5s linear infinite;
        }
        @-webkit-keyframes move8{
            0%{
                transform: rotateY(280deg) translateZ(300px);
            }
            100%{
                transform: rotateY(640deg) translateZ(300px);
            }
        }
        .center img:nth-child(9){
            transform: rotateY(40deg) translateZ(300px);
            animation: move9 5s linear infinite;
        }
        @-webkit-keyframes move9{
            0%{
                transform: rotateY(320deg) translateZ(300px);
            }
            100%{
                transform: rotateY(680deg) translateZ(300px);
            }
        }
    </style>
</head>
<body>
    <div class="center">
        <img src="./imgs/1.jpg" alt="">
        <img src="./imgs/2.jpg" alt="">
        <img src="./imgs/3.jpg" alt="">
        <img src="./imgs/4.jpg" alt="">
        <img src="./imgs/5.jpg" alt="">
        <img src="./imgs/6.jpg" alt="">
        <img src="./imgs/7.jpg" alt="">
        <img src="./imgs/8.jpg" alt="">
        <img src="./imgs/9.jpg" alt="">
    </div>

立方体双层

<style>
        .one{
            width: 400px;
            height: 400px;
            margin: 200px auto;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .big-box{
            width: 400px;
            height: 400px;
            transform: rotateX(-13deg) rotateY(0deg);
            transform-style: preserve-3d;
            animation: zhuan 4s linear infinite;
            position: absolute;
            z-index: 999;
        }
        .big-box img{
            width: 400px;
            height: 400px;
            opacity: 0.4;
            position: absolute;
            transition: all 2s;
        }
        .one:hover .big-box img:nth-child(1){
            transform: translateZ(400px);
            opacity: .9;
        }
        .one:hover .big-box img:nth-child(2){
            transform: translateZ(-400px);
            opacity: .9;
        }
        .one:hover .big-box img:nth-child(3){
            transform: rotateY(90deg) translateZ(-400px);
            opacity: .9;
        }
        .one:hover .big-box img:nth-child(4){
            transform: rotateY(90deg) translateZ(400px);
            opacity: .9;
        }
        .one:hover .big-box img:nth-child(5){
            transform: rotateX(90deg) translateZ(400px);
            opacity: .9;
        }
        .one:hover .big-box img:nth-child(6){
            transform: rotateX(90deg) translateZ(-400px);
            opacity: .9;
        }
        .left1{
            transform: rotateY(90deg) translateZ(-200px);
        }
        .right1{
            transform: rotateY(90deg) translateZ(200px);
        }
        .top1{
            transform: rotateX(90deg) translateZ(200px);
        }
        .bottom1{
            transform: rotateX(90deg) translateZ(-200px);
        }
        .after1{
            transform: translateZ(-200px);
        }
        .before1{
            transform: translateZ(200px);
        }
        .box{
            width: 200px;
            height: 200px;
            transform: rotateX(-13deg) rotateY(0deg);
            transform-style: preserve-3d;
            animation: zhuan 4s linear infinite;
            position: absolute;          
        }
        .box img{
            width: 200px;
            height: 200px;
            position: absolute;
            opacity: 1;
        }
        .left{
            transform: rotateY(90deg) translateZ(-100px);
        }
        .right{
            transform: rotateY(90deg) translateZ(100px);
        }
        .top{
            transform: rotateX(90deg) translateZ(100px);
        }
        .bottom{
            transform: rotateX(90deg) translateZ(-100px);
        }
        .after{
            transform:rotateZ(180deg) translateZ(-100px);
        }
        .before{
            transform: translateZ(100px);
        }
        @-webkit-keyframes zhuan{
            0%{
                transform: rotateX(-13deg) rotateY(0) rotateZ(0);
            }
            /* 50%{
                transform: rotateX(53deg) rotateY(360deg);
            } */
            100%{
                transform: rotateX(-13deg) rotateY(360deg)rotateZ(360deg);
            }
        }      
    </style>
</head>
<body>
    <div class="one">
        <div class="big-box">
            <img src="./img/1.png" alt="" class="before1">
            <img src="./img/2.png" alt="" class="after1">
            <img src="./img/3.png" alt="" class="left1">
            <img src="./img/4.png" alt="" class="right1">
            <img src="./img/5.png" alt="" class="top1">
            <img src="./img/6.png" alt="" class="bottom1">          
        </div>
        <div class="box">
            <img src="./img/01.png" alt="" class="before">
            <img src="./img/02.png" alt="" class="after">
            <img src="./img/03.png" alt="" class="left">
            <img src="./img/04.png" alt="" class="right">
            <img src="./img/05.png" alt="" class="top">
            <img src="./img/06.png" alt="" class="bottom">
        </div>
    </div>

Animate插件库

Animate.css内置了很多典型的css3动画,兼容性好使用方便 地址：Redirecting to Animate.css 演示地址：Animate.css 一款强大的预设css3动画库 下载地址：https://www.jq22.com/demo/Animate201707101048/animate.min.css

使用方式

第一步：使用link将css文件引入

第二步：选择样式添加 <div class="animated fadeInLeft">从左边进入页面位置 animated 里面定义了动画执行的时间 fadeInLeft 中定义了动画的样式 </div >

<!-- 引入css样式 --> 
<link rel="stylesheet" href="https://www.jq22.com/demo/Animate201707101048/animate.min.css">
 <!-- 调用css样式 --> 
<div class='animated shake'>hello world</div>

 

 WOW.js插件

效果参考资料：WOW.js演示_dowebok

使用参考资料：https://www.cnblogs.com/front-Q/p/9006878.html

总结：CSS3新增属性

CSS3选择器，CSS3实现圆角（border-radius），阴影（box-shadow），对文字加特效（text-shadow），线性渐变（gradient），2D变形（transform），3D效果，animate动画，媒体查询，多栏布局，弹性盒子