制作照片墙（一些定论）
html => 结构 可供于浏览器先编译再读取的一门语言
标签 梁css = > 样式 可供于浏览器 直接读取 的一门语言 装修javascript => 行为 生活margin:0 2px 4px;(上 左右 下)元素分为三类：
1.块元素 ，独占一行 有宽高属性
2.行内元素，后面可接其他元素 a
3.行内块元素，接其他元素
transform：rotate（10deg;
阴影属性box-shadow:px px px red;transition:all 1s;
(过渡动画):hover{ transform:rotate(0deg);
scale（缩放）}position:relative;left:0px; top:100px;
设置相对定位元素，无论定位到哪里去，原来位置还居中
.img01{
/*第一个属性 rotate 角度
第二个属性 scale 缩放 */
transform:rotate(10deg);
/* 设置相对定位的元素，无论定位到哪里去，原来的位置还中据，不会影响其它的结构布局 */
/* position:relative; left:0px; top:100px; */
/* 设置层级关系，必要有定位的属性，不管什么定位都行 */
/* z-index:8; */
旋转图片第一种方式：
(景深效果)perspective
transfrom-style:preserve-3d;(要实现真是的三维空间效果，必须得设置这个3D属性，如果只是设置了景深效果参数，不设置三维参数，那他只是三维平面)
<style>
*{margin:0; padding:0;}
body{
background:#999;
}
.box{
width:200px; height:200px; margin:200px auto; border:2px solid red;
/*景深属性，好比舞台效果，离得越近(设置的值越小)，看得越大，反之... */
perspective:800px;}
.photo{
width:200px; height:200px; position:relative;
/* 要实现真实的三维空间效果，必须得设置这个3D属性, 如果只是设置了之前的景深参数，不设置这个
三维参数，那么它只是看似三维的平面效果
*/
transform-style:preserve-3d;
/*css3过渡动画 */
/* transition:1s; */
/*css3属性，调用定制动画，
第一个参数表示定制动画的名称
第二个参数表用多少时间来完成这个定制的动画
第三个参数表示动画的形式，linear表示匀速运动
第四个参数表示此动画循环重复
*/
animation:play 15s linear infinite;}
.photo img{
width:200px; height:200px; position:absolute; left:0; top:0}
.img01{
transform:rotateY(40deg) translateZ(400px)
}
/*css3定制动画 */
@keyframes play{
/*form表示初始状态 */
form{
transform:rotateY(0deg);}
/*to表示结束状态 */
to{transform:rotateY(-360deg);}
}
.img02{
transform:rotateY(80deg) translateZ(400px)}
.img03{
transform:rotateY(120deg) translateZ(400px)}
.img04{
transform:rotateY(160deg) translateZ(400px)}
.img05{
transform:rotateY(200deg) translateZ(400px)}
.img06{
transform:rotateY(240deg) translateZ(400px)}
.img07{
transform:rotateY(280deg) translateZ(400px)}
.img08{
transform:rotateY(320deg) translateZ(400px)}
.img09{
transform:rotateY(360deg) translateZ(400px)}
/* .photo:hover{
transform:rotateY(30deg)
} */
</style>
</head>
<body>
<div class="box">
<div class="qwq">
<img src="1.jpg">
</div>
</div>
第二种方式制作（js)
<script src="1.js"></script>
<script src="2.js"></script>
<script>
//$('.photo').css('border', '100px solid red')
//var a = 0;
//$('.photo').click(function(){
//a += 3;
//alert(a);(弹出小框)；
//});
//定义一个变量叫做a，并且把0赋值给它，那么这个a就等于0
var a = 0;
//选择对象为document，表示整个文档，然后加鼠标滚动事件，function为所要执行的具体事件
//function里面有一个参数为detail，它可以帮助返回鼠标滚动是向上滚还是向下滚，-1表示向下滚动
// 1表示向上滚动
$(document).mousewheel(function(e, detail){
//console.log(detail) // -1 1
//alert(11)
//每次鼠标滚动，之前设置的a变量就会加一次40*（正1还是负1，取决于用户滚动的方向）
a += 40 * detail;
//给这个对象为.photo的设置样式
$('.photo').css('transform','rotateY('+a+'deg)')
})
>
网友评论