Web前端学习笔记5（transformZ,transform3d,rotate3d）

transform3d

 /* transform: translateX(100px);

            transform: translateY(100px);

            transform: translateX(100px) translateY(100px) translateZ(100px); */

            /* translateZ沿着Z轴移动 */

            /* translateZ后面的单位我们一般跟px; */

            /* translateZ(100px)向外移动100px，（向我们的眼睛来移动） */

            /* 3D移动有简写的方法 */

            /* transform: translate3d(x, y, z); */

            /* xyz不能省略，如果不要就写0 */

body{
            /* 透视写在被观察盒子的父盒子上面 */
            perspective: 500px;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* transform: translateX(100px);
            transform: translateY(100px);
            transform: translateX(100px) translateY(100px) translateZ(100px); */
            /* translateZ沿着Z轴移动 */
            /* translateZ后面的单位我们一般跟px; */
            /* translateZ(100px)向外移动100px，（向我们的眼睛来移动） */
            /* 3D移动有简写的方法 */
            /* transform: translate3d(x, y, z); */
            /* xyz不能省略，如果不要就写0 */
            transform: translate3d(400px, 100px, 100px);
        }

 rotate3d

/* transform: rotateX(180deg); */

            /* transform: rotate3d(x, y, z, deg); */

            /* 沿x轴 */

            /* transform: rotate3d(1, 0, 0, 45deg); */

            /* 矢量和  以下为45度轴旋转*/

body{
            perspective: 500px;
        }
        img{
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }
        img:hover{
            /* transform: rotateX(180deg); */
            /* transform: rotate3d(x, y, z, deg); */
            /* 沿x轴 */
            /* transform: rotate3d(1, 0, 0, 45deg); */
            /* 矢量和  以下为45度轴旋转*/
            transform: rotate3d(1, 1, 0, 45deg);
        }