css3实现图片3d翻转效果

来源：互联网发布：剑三女神花姐捏脸数据编辑：程序博客网时间：2024/04/28 15:13

1.html部分

<body><div class="main"><div class="w"><div class="box"><div class="back"><h2>风景图片介绍</h2><span></span><p>瑞士田园乡村风景图片，大部分是来自阿尔卑斯山脚下的乡村。是由很多大师完成的油画。</p><span></span></div><div class="front pic1"></div></div><div class="box"><div class="back"><h2>风景图片介绍</h2><span></span><p>瑞士田园乡村风景图片，大部分是来自阿尔卑斯山脚下的乡村。是由很多大师完成的油画。</p><span></span></div><div class="front pic2"></div></div><div class="box"><div class="back"><h2>风景图片介绍</h2><span></span><p>瑞士田园乡村风景图片，大部分是来自阿尔卑斯山脚下的乡村。是由很多大师完成的油画。</p><span></span></div><div class="front pic3"></div></div></div></div></body>

2.less文件部分

@charset: "utf-8";* {    margin: 0;    padding: 0;    box-sizing: border-box;}ul,ol {    list-style: none;}img {    border: none;}body {    font-family: "微软雅黑,microsoft yahei";    font-size: 12px;}.main {    width: 1100px;    margin: 0 auto;    border: 1px solid blue;}.w {    width: 970px;    margin: 0 auto;}h2 {    color: #fff;    margin-top: 50px;    font-weight: lighter;}span {    display: block;    height: 1px;    background: #fff;    width: 220px;    margin: 20px auto;}p {    color: #fff;    font-size: 14px;    font-weight: lighter;    line-height: 30px;    margin: 0 20px;}.clearfixed:after {    content: ".";    height: 0;    clear: both;    display: block;    visibility: hidden;}.box {    width: 300px;    height: 300px;    margin: 20px 10px;    display: inline-block;    transform-style: preserve-3d; //设置这个就可以让元素在3d空间内显示    transform: rotateX(-10deg);    position: relative;    .back {        width: 100%;        height: 100%;        background: #3C3F41;        text-align: center;        transform: rotateY(90deg);        transition: all 0.4s linear;        opacity: 0.8;        position: absolute;        top: 0;        left: 0;    }    .front {        width: 100%;        height: 100%;        position: absolute;//      top: 0;//      left: 0;        opacity: 0.9;        transition: all 0.4s linear;    }    .pic1 {        background: url(../img/1.jpg) no-repeat center center;        background-size: 300px 300px;    }    .pic2 {        background: url(../img/2.jpg) no-repeat center center;        background-size: 300px 300px;    }    .pic3 {        background: url(../img/3.jpg) no-repeat center center;        background-size: 300px 300px;    }}.box:hover .front {    transform: rotateY(-90deg);}.box:hover .back {    transform: rotateY(0deg);}

0 0