css3实现图片3d翻转效果

梦里梦外; 2022-06-17 10:24 354阅读 0赞

## **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);
    }