This time I will bring you pure CSS to achieve the 3D effect of the photo wall. What are theprecautions to achieve the 3D effect of the photo wall with pure CSS? The following is a practical case, let's take a look.
Go directly to the code 1. Prepare materials: There is no material to prepare, so hurry up and go: Baidu can find a few photos of beautiful women to test . 2.html code:照片墙 <前端学习交流QQ群:461593224>
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
* { margin:0; padding:0; } body { background-color:#eee; } .container { width:960px; height:450px; margin:60px auto; position:relative; } .img { /*宽度可以根据自己选择的照片内容而定*/ width:150px; } .container img:hover { box-shadow:15px 15px 20px rgba(50,50,50,0.4); transform:rotate3d(1,1,1,180deg) scale(1.50); -webkit-transform:rotate3d(1,1,1,180deg) scale(1.50); -moz-transform:rotate3d(0deg,0deg,0deg) scale(1.50); -ms-transform:rotate3d(0deg,0deg,0deg) scale(1.50); /*本身图片的z-index是1,鼠标经过时候设置成2,那么这张图片就会"上来"*/ z-index:2; } .container img { /*给照片加一个相框的效果*/ padding: 10px 10px 15px; background-color: white; border: 1px solid #ddd; box-shadow: 2px 2px 3px rgba(50,50,50,0.4); /*渐出动画效果*/ -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; -webkit-transition: all 0.5s ease-in; transition: all 0.5s ease-in; z-index: 1; } .img1 { left:400px; top:0; /*CSS3属性transform:旋转:rotate,缩放:scale,倾斜:skew */ transform:rotate(-5deg); /*-webkit代表chrome、safari私有属性*/ -webkit-transform:rotate(-5deg); /*-moz代表firefox浏览器私有属性*/ -moz-transform:rotate(-5deg); /*-ms代表IE浏览器私有属性*/ -ms-transform:rotate(-5deg); } .img2 { left:600px; top:0; /*旋转角度可以根据自己的审美观定夺*/ transform:rotate(-20deg); -webkit-transform:rotate(-20deg); -moz-transform:rotate(-20deg); -ms-transform:rotate(-20deg); } .img3 { bottom:0px; right:0; transform:rotate(5deg); -webkit-transform:rotate(5deg); -moz-transform:rotate(5deg); -ms-transform:rotate(5deg); } .img4 { bottom:400px; left:300px; transform:rotate(-10deg); -webkit-transform:rotate(-10deg); -moz-transform:rotate(-10deg); -ms-transform:rotate(-10deg); } .img5 { bottom:0px; top:0; transform:rotate(-10deg); -webkit-transform:rotate(-10deg); -moz-transform:rotate(-10deg); -ms-transform:rotate(-10deg); } .img6 { left:0px; top:0; transform:rotate(10deg); -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); -ms-transform:rotate(10deg); } .img7 { left:850px; top:0; transform:rotate(20deg); -webkit-transform:rotate(20deg); -moz-transform:rotate(20deg); -ms-transform:rotate(20deg); } .img8 { bottom:-20px; top:650px; transform:rotate(5deg); -webkit-transform:rotate(5deg); -moz-transform:rotate(5deg); -ms-transform:rotate(5deg); } .img9 { left:550px; top:100px; transform:rotate(15deg); -webkit-transform:rotate(15deg); -moz-transform:rotate(15deg); -ms-transform:rotate(15deg); }
How to use the linear-gradient linear gradient of CSS3
Detailed explanation of the mask-image attribute of CSS
The above is the detailed content of Pure css to achieve 3D effect of photo wall. For more information, please follow other related articles on the PHP Chinese website!