css3實現圖片3d翻轉效果
阿新 • • 發佈：2019-01-03
@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); }