CSS3绚丽照片墙_技术问答

SuperMan_GYD

这里的白框可以用border把。。。不一定要padding吧: 2019-08-08 1回答·946浏览

qq_qwertyuiop_24185030

为什么设置的z-index不能用？

要想给元素设置z-index样式，必须先让它变成定位元素，再通俗一点说，就是要给元素设置一个postion：relative

不要给想控制“上、下”的元素设置z-index，而是对他们的父容器设置z-index样式。

2017-09-09 1回答·2588浏览

不可以为空

img:hover选中不了图片但是改成#image-1就可以，求教大神这是为啥: 自己解决了，问题在于。。。#image-1下的transform覆盖了了所有的类选择器; 2017-01-13 2回答·2810浏览

逸风4241167

.pic ul li.second:hover{ -webkit-transform:rotate(1000deg); -moz-transform:rotate(1000deg); -ms-transform:rotate(1000deg); transform:rotate(1000deg); -webkit-transform:scale(2); -moz-transform:scale(2); -ms-transform:scale(2);}: 360deg为一圈,1000%360=280deg, 1000deg=280deg,最高度数为360deg; 2016-12-13 2回答·1477浏览

柒秒菂记忆

放大效果没出来咋整: 最好把代码也一起粘出来，你的放大效果和旋转效果是一起不好用的还是只有放大不好用，如果只是放大不好用有可能是单词拼错了吧; 2016-12-01 2回答·1418浏览

柒秒菂记忆

transform功能实现不了怎么办: 要写在hover里面，当鼠标滑过时显示。多个属性值用空格隔开; 2016-12-01 1回答·1294浏览

流光微凉

怎么给这个照片墙加上响应式呢: 已采纳江洋大盗4240981 的回答; ：hover; 2016-11-15 1回答·1378浏览

泡面大减价

怎样让图片一直转: /* css3 让一个图片不断翻转示例代码 */
#gavinPlay{
/* background:color url x y repeat 图片来自百度图片，按需要更换 */
background:red url("https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2406548182,3889596045&fm=80") center no-repeat;
/* background-size:auto auto || cover 代表以宽或高填满元素背景 */
background-size:cover;
/* 随便设置宽高值，测试 */
width:200px;
height:200px;
/* 设置默认样式，开启3d硬件加速 */
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
/* 设置动画，animation:动画名称动画播放时长单位秒或微秒动画播放的速度曲线linear为匀速动画播放次数infinite为循环播放; */
-webkit-animation:play 3s linear infinite;
-moz-animation:play 3s linear infinite;
animation:play 3s linear infinite;
}
@-webkit-keyframes play{
0%  {
/*
水平翻转
*/
-webkit-transform:rotateY(0deg);
/*
垂直翻转
-webkit-transform:rotateX(0deg);
顺时针旋转
-webkit-transform:rotate(0deg);
逆时针旋转
-webkit-transform:rotate(0deg);
*/
}
100% {
/* 水平翻转 */
-webkit-transform:rotateY(360deg);
/* 垂直翻转
-webkit-transform:rotateX(360deg);
顺时针旋转
-webkit-transform:rotate(360deg);
逆时针旋转
-webkit-transform:rotate(-360deg);
*/
}
}
@-moz-keyframes play{
0%  {
-moz-transform:rotateY(0deg);
/*
-moz-transform:rotateX(0deg);
-moz-transform:rotate(0deg);
-moz-transform:rotate(0deg);
*/
}
100% {
-moz-transform:rotateY(360deg);
/*
-moz-transform:rotateX(360deg);
-moz-transform:rotate(360deg);
-moz-transform:rotate(-360deg);
*/
}
}
@keyframes play{
0%  {
transform:rotateY(0deg);
/*
transform:rotateX(0deg);
transform:rotate(0deg);
transform:rotate(0deg);
*/
}
100% {
transform:rotateY(360deg);
/*
transform:rotateX(360deg);
transform:rotate(360deg);
transform:rotate(-360deg);
*/
}
}

<div id="gavinPlay"></div>; 2016-10-28 1回答·2715浏览

慕粉3884565

为什么没有反应，旋转也没有: transition 放在img里; 2016-09-05 1回答·1644浏览

慕虎4364329

图片转动不了: 为啥啊？; 2016-08-26 1回答·1341浏览

慕婉清0837092

这么多个图片的位置和角度是不是可以用js写会简单一点呢

……

img:hover{

-webkit-transform: rotate(0deg) !important;

-moz-transform: rotate(0deg) !important;

transform: rotate(0deg) !important;

-webkit-transform:scale(1.2)!important;

-moz-transform: scale(1.2)!important;

transform:scale(1.2)!important;

box-shadow: 10px 10px 15px #ccc !important;

z-index: 100 !important;

}

</style>

window.onload = function(){

var con = document.getElementById("container");

var imags=document.getElementsByTagName("img");

for (var i = 0; i < imags.length; i++) {

imags[i].style.transform= "rotate("+ Math.floor(Math.random()*45) + "deg)";

imags[i].style.top=Math.floor(Math.random()*con.clientHeight*0.8)+"px";

imags[i].style.left=Math.floor(Math.random()*con.clientWidth*0.8)+"px";

}

</script>

2016-06-20 2回答·1334浏览

朱泽伟

无法正常显示，希望能帮我看下代码哪里有问题

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    body{background-color: #eee;}
    h1{text-align: center;}
 
    .container{width: 900px; 
        height: 450px; 
        margin: 60px auto; 
        position: relative; }
 
    img{width: 200px; 
        height: 200px; 
        padding: 10px 10px 15px 10px; 
        background-color: white;
        border: 1px solid #ddd; 
        position: absolute; 
        transition: 1s; 
        -webkit-transition:1s;
        -moz-transition:1s;
        z-index: 1;
    }
 
    img:hover{-webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        transform: scale(1.2); 
        box-shadow: 10px 10px 15px #ccc;
        z-index: 2;}
 
 
 
.pic1{top: 45px; left: 100px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);}
.pic2{top: 70px; left: 220px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);}
.pic3{top: 13px; left: 310px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);}
.pic4{top: 23px; left: 400px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);}
.pic5{top: 53px; left: 490px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);}
.pic6{top: 32px; left: 580px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);}
</style>
<body>
    <div>
        <img src="images/test5.jpg" />
        <img src="images/t6.jpg" />
        <img src="images/t7.jpg" />
        <img src="images/t8.jpg" />
        <img src="images/t9.jpg" />
        <img src="images/t10.jpg" />
    </div>
</body>
</html>

我个人觉得是没什么问题的。这是从你这复制出来的。只不过是图片地址换了一下我本地的图片。

2016-06-07 3回答·1338浏览