HTML CSS3变形移动、旋转、缩放、3d 、动画 拉伸布局等笔记
2024-04-26 00:49:17
变形移动
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div{width: 100px;height: 100px;background-color: hotpink;transition: all 0.5s; /*变形移动所有*/}div:active{ /*鼠标活动时 状态为鼠标点击但是没有松开时触发 相当于点击事件*//*transform: translateX(100px);*/ /*水平移动100px*//*transform: translate(50%); *//*百分比代表是自身宽度的一半 不是父盒子的宽度*//*transform: translate(50px);*/ /*点击之后x轴方向移动50px*/transform: translate(50px ,50px); /*点击之后 x y 轴方向移动50px*//*transform: translateY(100px);*/ /*点击后y轴移动100px*/}</style></head><body><div>点击我试试看</div></body></html>居中对齐
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div{width: 200px;height: 200px;background-color: deeppink;/*transform: translate(100px); 水平移动100px*//*transform: translate(50%); 默认是X轴 水平移动自身宽度的一半*//*transform: translateY(50%); 在y轴移动自身高度的一半*//*定位移动*/position: absolute;left: 50%;top: 50%;/*margin-left: -100px;需要计算*/transform: translate(-50%,-50%); /*右移上移自身的一半 */}</style></head><body><div></div></body></html>transform:scale 图片缩放
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div{width: 100px;height: 100px;background-color: hotpink;margin: 100px auto;}div:active{/*transform: scale(2);*/ /*水平 垂直縮放 一个参数代表宽 高都同时缩放*/ transform: scale(1, 2); /*宽度不变，高度变2倍*/}section{width: 632px;height: 340px;margin: 0 auto;overflow: hidden; /*溢出隐藏*/border: 1px solid green;}section img{transform: all 0.2s; /*图片缩放 谁做动画，谁加过渡*/}section img:hover{transform: scale(1.8); /*缩放*/}</style></head><body><div></div><section><img src="data:images/mi.jpg"></section></body></html>transform:rote 旋转
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">img{margin: 100px;transition: all 3s ease-in 1s; /*全部属性过渡 过渡时长 动画曲线 何时开始*//*border-radius: 50%;*/ /*圆角*/border-radius: 100px;border: 10px solid deeppink;}img:hover{/*transform: rotate(-90deg);*/ /*deg度数*/transform: rotate(720deg);}</style></head><body><img src="data:images/chu.jpg"></body></html>沿x轴旋转
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">img{margin: 100px;transition: all 1s ease-in 0.2s;}/*img:active{*/.one:hover{transform: rotateX(360deg);}.two:hover{transform: rotateY(360deg);}.three:active{transform: rotateZ(180deg);}.four:active{transform: rotateX(45dep) rotateY(180deg) rotateZ(90deg) skew(0,10deg);}</style></head><body><img class="one" src="data:images/3.jpg"><img class="two" src="data:images/4.jpg"><img class="three" src="data:images/5.jpg"><img class="four" src="data:images/6.jpg"></body></html>变换中心点旋转
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">img{margin: 200px;transition: all 0.6s; /*添加所有属性过渡效果*/transform-origin: 20px 30px; /*旋转中心点*/}img:hover{transform: rotate(360deg); /*x轴旋转360度*/}</style></head><body><img src="data:images/pk1.png"></body></html>呈360旋转排列的图片
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div{width: 250px;height: 170px;border: 1px solid deeppink;margin: 400px auto;position: relative;}div img{width: 100%;height: 100%;position: absolute;top: 0;left: 0;transition: all 0.6s; /*添加过渡属性*/transform-origin: top right; /*旋转的中心点*/}div:hover img:first-child{ /*鼠标经过div 第一张图片旋转60°*/transform: rotate(60deg); /*选装60°*/}div:hover img:nth-child(2){ /*鼠标经过div 第二张图片旋转60°*/transform: rotate(120deg); /*选装60°*/}div:hover img:nth-child(3){transform: rotate(180deg); /*选装60°*/}div:hover img:nth-child(4){transform: rotate(240deg); /*选装60°*/}div:hover img:nth-child(5){transform: rotate(300deg); /*选装60°*/}div:hover img:nth-child(6){transform: rotate(360deg); /*选装60°*/}</style></head><body><div><img src="data:images/1.jpg" alt=""><img src="data:images/2.jpg" alt=""><img src="data:images/3.jpg" alt=""><img src="data:images/4.jpg" alt=""><img src="data:images/5.jpg" alt=""><img src="data:images/6.jpg" alt=""></div></body></html>变形skew倾斜
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div{font-size: 50px;font-weight: 700;margin: 100px;transition: all 0.7s; /*过渡属性*/}div:hover{/*transform: skew(-30deg, 0);*/transform: skew(30deg, 0);}</style></head><body><div>不经云清零天下会，荣登雄霸宝位</div></body></html>rotateX旋转
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">/*视距 摄影机与屏幕之间的距离 视距越大也不明显 视距越小效果越明显*/body{perspective: 1000px;}img{display: block;margin: 100px auto;transition: all 1s;}img:hover{transform: rotateX(360deg);}</style></head><body><img src="data:images/pk1.png"></body></html>perspective 视距
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">/*视距 摄影机与屏幕之间的距离 视距越大也不明显 视距越小效果越明显*/body{perspective: 1000px;}img{display: block;margin: 100px auto;transition: all 1s;}img:first-child:hover {transform: rotateX(360deg);}img:nth-child(2):hover {transform: rotateY(360deg);}img:nth-child(3):hover{transform: rotateZ(360deg);}img:last-child:hover{transform: skew(30deg);}</style></head><body><img src="data:images/pk1.png"><img src="data:images/pk1.png"><img src="data:images/pk1.png"><img src="data:images/pk1.png"></body></html>透视效果
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">/*视距 摄影机与屏幕之间的距离 视距越大也不明显 视距越小效果越明显*/body{perspective: 1000px;}img{display: block;margin: 100px auto;transition: all 1s;}img:first-child:hover {transform: rotateX(360deg);}img:nth-child(2):hover {transform: rotateY(360deg);}img:nth-child(3):hover{transform: rotateZ(360deg);}img:last-child:hover{transform: skew(30deg);}</style></head><body><img src="data:images/pk1.png"><img src="data:images/pk1.png"><img src="data:images/pk1.png"><img src="data:images/pk1.png"></body></html>translateZ移动 3D效果
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">body{perspective: 600px;}div{width: 200px;height: 200px;background-color: pink;margin: 100px auto;transition: all 1s; /*添加过渡*/}div:hover{/*transform: translateX(100px);*//*transform: translateY(100px);*/transform: translateZ(300px); /*z控制物体与摄影机之间的距离 z越大 物体就越大 看似3D效果*/}</style></head><body><div></div></body></html>translate3d<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">body{perspective: 700px;}div.box1{width: 200px;height: 200px;background-color: deeppink;transition: all 0.7s; /*所有的属性过渡*/margin: 100px auto;/*transform: translate(-50%,-50%); */transform: translate(-50%);}div:hover{/* 近大远小*/transform: translate3d(100px, 100px, 300px); /*参数 x y z 其中x y可以是px 或者是% Z只能是px*/}h4{transform: translate3d(0px, 50px, 0px);transition: all 0.6s;}h4:hover{transform: translate3d(0px, 0px, 0px);}.box{height: 1px;width: 100%;background-color: red;margin: 0;}/*清除浮动*/.clearfix::after{content: ">";display: block;height: 0;visibility: hidden;/* 隐藏盒子*/clear: both; /*清除浮动*/}.clearfix{*zoom: 1;}</style></head><body><div class="box1"></div><div class="box"></div><h4>小米：让每一个人都能平等的享受科技带来的乐趣</h4></body></html>开门大吉
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>开门大吉</title><style type="text/css">body{background-color: green;}section{width: 450px;height: 300px;margin: 100px auto;border: 1px solid #000;background: url(images/chu.jpg) no-repeat;background-size: cover; /*保证图片充满整个区域*/perspective: 1000px; /*给父盒子添加透视效果 */position: relative;}/*宽度缩放一半*//*添加过渡效果*/.door-l,.door-r{position: absolute;top: 0;width: 50%;height: 100%;background-color: green;background: url(images/bg.png);transition: all 1s;}/*左侧盒子按照左旋转*/.door-l{left: 0;border: 1px solid #000;transform-origin: left;}.door-r{right: 0;border: 1px solid #000;transform-origin: right;}.door-l::before,.door-r::before{ /*伪元素*/content: "";position: absolute; /*绝对定位*/top: 50%;width: 20px;height: 20px;border: 1px solid #000;border-radius: 50%;transform: translateY(-50%);}.door-l::before{right: 15px;}.door-r::before{left: 15px;}/*当鼠标经过selection盒子时候 翻转rotateY*/section:hover .door-l{transform: rotateY(-130deg);}section:hover .door-r{transform: rotateY(130deg);}</style></head><body><section><div class="door-l"></div><div class="door-r"></div></section></body></html>两面翻转图片
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div{width: 224px;height: 224px;margin: 100px auto;position: relative; /*子绝父相*/transform-style: preserve-3d; /*保留当前位置 图片扁平滑*/}div img{position: absolute;top: 0;left: 0;transition: all 4s; /*添加过渡属性*/}div img:first-child{z-index: 1;backface-visibility: hidden; /*不是正面对着屏幕的就隐藏*/}div:hover img{transform: rotateY(180deg);}</style></head><body><div><img src="data:images/qian.svg" alt=""><img src="data:images/hou.svg" alt=""></div></body></html>CSS3动画属性
@keyframes 规定动画
animation 所用动画属性的简写
animation-name 动画名称
animation-duration 动画时长
animation-timing-function 动画运动曲线 默认ease
animation-delay 何时开始
animation-iteration-count 动画播放次数 默认1
animation-direction 是否在下一期逆向播放
animation-paly-state 正在运行或者暂停 默认 running
animation-fill-mode 规定动画时间外的状态
除了名字，动画时间 延时有严格顺序要求，其他随便
animation
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div{width: 100px;height: 100px;background-color: deeppink;/*animation: go 2s ease 0s 2 reverse;*/ /*动画名称go 运动时间2s 运动曲线ease 何时开始0s 播放次数2 [reverse 逆向 normal 正常+]*//*animation: go 2s ease 0s 2 ;*/ /*顺时针2次*//*animation: go 2s ease-in 0s infinite; *//*infinite 无线循环*/animation: go 2s ease-in 0s infinite alternate; /*normal正常 alternate 正常-反方向 交替 alternate reverse 先反在正 交替 */}@keyframes go { /*定义动画 在x轴移动600px*/from{transform: translateX(0px);}to{transform: translateX(600px);}}</style></head><body><div></div></body></html>多组动画
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div{width: 100px;height: 100px;background-color: deeppink;/*animation: go 2s ease 0s infinite alternate;*/ /*动画名称 动画时长 运动曲线 何时开始 无线循环 正-反交替*/animation: go 2s infinite; /*引用动画*/}@keyframes go { /*定义动画*/0%{ /*等价于from*/transform: translate3d(0px, 0px, 0px);}25%{transform: translate3d(800px, 0px, 0px);}50%{transform: translate3d(800px, 400px, 0px);}75%{transform: translate3d(0px, 400px, 0px);}100%{ /*相当于to*/transform: translate3d(0px, 0px, 0px);}/*动画结束之后返回原来的位置*/}</style></head><body><div></div></body></html>奔跑吧汽车动画
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">img{animation: car 5s infinite; /*引入动画*/}@keyframes car { /*定义动画*/0%{transform: translate3d(0px, 0px, 0px);}50%{transform: translate3d(1000px, 0px, 0px);}51%{transform: translate3d(1000px, 0px, 0px) rotateY(180deg); /*如果是多组变形 都属于transform 用空格隔开*/}99%{transform: translate3d(0px, 0px, 0px) rotateY(180deg);}}</style></head><body><img src="data:images/car.jpg" width="250"></body></html>横幅无线滚动效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}ul{list-style: none;}nav{width: 1200px; /*200*6=1200 图片的宽度*展示图片的数量 前提是图片必须尺寸一致*/height: 100px;border: 1px solid pink;margin: 100px auto;overflow: hidden;}nav li{float: left; /*浮动*/}nav ul{width: 200%;animation: moving 10s linear infinite;/*引用动画 无线循环 linear匀速*/}@keyframes moving { /*定义动画*/form{transform: translateX(0);}to{transform: translateX(-1200px);}}nav:hover ul{ /*鼠标经过ul就暂停动画*/animation-play-state: paused; /*暂停动画*/}</style>
</head>
<body><nav><ul><li><img src="data:images/1.jpg" width="200" height="100"></li><li><img src="data:images/2.jpg" width="200" height="100"></li><li><img src="data:images/3.jpg" width="200" height="100"></li><li><img src="data:images/4.jpg" width="200" height="100"></li><li><img src="data:images/5.jpg" width="200" height="100"></li><li><img src="data:images/6.jpg" width="200" height="100"></li><li><img src="data:images/1.jpg" width="200" height="100"></li><li><img src="data:images/2.jpg" width="200" height="100"></li><li><img src="data:images/3.jpg" width="200" height="100"></li><li><img src="data:images/4.jpg" width="200" height="100"></li><li><img src="data:images/5.jpg" width="200" height="100"></li><li><img src="data:images/6.jpg" width="200" height="100"></li></ul></nav>
</body>
</html>传统的三等分
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">section{width: 80%;height: 200px;border: 1px solid green;margin: 100px auto;}section div{width: 33.33%;height: 100%;float: left;}section div:nth-child(1){background-color: green;}section div:nth-child(2){background-color: orange;}section div:nth-child(3){background-color: deepskyblue;}</style></head><body><section><div></div><div></div><div></div></section></body></html>flex 伸缩布局
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">/* *{margin: 0;padding: 0;}*/section{width: 80%;height: 200px;border: 1px solid greenyellow; margin: 100px auto;display: flex; 伸缩布局模式 这个盒子就会拥有弹性 可弹性盒子}div{height: 100%;/*flex: 1; 表示每个盒子都占一份*/}div:first-child{background-color: deeppink;flex: 1; /*子盒子占分数为1*/}div:nth-child(2){background-color: lawngreen;flex: 2; /*子盒子占分数为1*/}div:last-child{background-color: lightseagreen;flex: 1; /*子盒子占分数为1*/}</style></head><body><section><div></div><div></div><div></div></section></body></html>flex伸缩固定布局
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">section{width: 80%;height: 200px;border: 1px solid #ccc;display: flex; /*伸缩布局模式*/min-width: 500;/*最小宽度500px*/}section div{height: 100%;}section div:first-child{background-color: green;width: 200px;}section div:nth-child(2){background-color: pink;flex: 1;}section div:last-child{background-color: deeppink;flex: 1;}/*说明：前面是固定的200px 后边两个盒子会平分剩余的宽度*/</style></head><body><section><div></div><div></div><div></div></section></body></html>伸缩布局排列方式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">section{width: 80%;height: 200px;border: 1px solid rebeccapurple;display: flex; /*伸缩布局*/min-width: 500px;/*flex-direction: column;*/ /*排列方式是列*//*flex-direction: row;*/ /*排列方式是row*/flex-direction: row-reverse; /*排列方式是反向row */}div:first-child{background-color: deepskyblue;flex: 1; /*分1份*/}div:nth-child(2){background-color: rebeccapurple;flex: 3; /*分3份*/}div:nth-child(3){background-color: green;flex: 1;}div:last-child{background-color: hotpink;/*height: 500px;*/width: 100px;}</style></head><body><section><div>1</div><div>2</div><div>3</div><div>4</div></section></body></html>justify-content 插入内容
flex-start 默认从父盒子开头
fled-end 项目位于父盒子结尾
center 项目位于容器中心
space-between 项目位于父盒子各行之间留有空白的容器内
space-around 项目位于各行之前、之后、之间都留有空白的容器
justify-content
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">section{width: 1000px;height: 250px;border: 1px solid orange;display: flex; /*伸缩布局*//*justify-content: flex-start; 默认*//*justify-content: flex-end; 从父盒子右边添加*//*justify-content: center; 从父盒子中心添加*//*justify-content: space-between;*/ /*在父盒子宽度范围内平均空白的区域*/justify-content: space-around; /*在各控件之前之间之后平局分配空白区域*/}div{width: 200px;height: 250px;}div:first-child{background-color: deeppink;width: 400px;}div:nth-child(2){background-color: green;}div:last-child{background-color: yellowgreen;}</style></head><body><section><div></div><div></div><div></div></section></body></html>align-items 调整测轴对齐
stretch 默认值 项目被拉伸以适应容器 前提子元素不要给高度
center 项目位于容器中心
flex-start 项目位于容器开头
flex-end 项目位于容器结尾
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">section{width: 1000px;height: 500px;border: 1px solid green;display: flex; /*伸缩布局*/justify-content: space-between;/*align-items: flex-start; 默认上对齐*//*align-items: flex-end; 底部对齐*//*align-items: center; *//*垂直对齐*/align-items: stretch; /*拉伸高*/}section div{width: 200px;/*height: 100px;*/}div:first-child{background-color: greenyellow;}div:nth-child(2){background-color: orange;}div:last-child{background-color: powderblue;}</style></head><body><section><div></div><div></div><div></div></section></body></html>flex-wrap控制是否换行
norwrap 不拆行 不拆列 压缩显示
wrap 必要时拆行拆列
wrap-reverse 相反顺序 必要时拆行拆列
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">section{width: 1000px;height: 1000px;border: 1px solid green;display: flex; /*伸缩模式*//*flex-wrap: nowrap; 默认 不换行 则压缩显示*//*flex-wrap: wrap; 必要时拆分*/flex-wrap: wrap-reverse; /*反转*/}div{width: 250px;height: 200px;}div:first-child{background-color: green;}div:nth-child(2){background-color: orange;}div:nth-child(3){background-color: darkorange;}div:nth-child(4){background-color: limegreen;}div:nth-child(5){background-color: pink;}</style>
</head>
<body><section><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></section>
</body>
</html>align-content 堆栈 [由flex-wrap产生的独立行对齐]
align-content针对flex容器多轴情况 align-item是针对一行情况排列
父元素必须设置display:flex 横向排列必须设置 flex-direction:row flex-wrap:wrap 属性才会起作用
stretch 默认值 项目被拉伸适应容器
center 项目位于容器中心
flex-start 项目位于容器开头
flex-end 项目位于容器结尾
space-between 项目位于各行之间的空白
space-around 项目位于各行之前 之间 之后都留有控件容器内
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">section{width: 1000px;height: 800px;border: 1px solid purple;display: flex; /*拉神模式*/flex-flow: row wrap; /*必须设置这个属性 否则下边不起作用*//*align-content: center; 项目居中*//*align-content: flex-start; 位于父盒子开始排列*//*align-content: flex-end; 位于父盒子的底部*//*align-content: space-between; 垂直平分各行之前之后的空白容器区域*//*align-content: space-around; 垂直平分各行之前之间之后的空白区域*/align-content: stretch; /*不要给子元素高度值*/}div{width:248px;/*height: 200px;*/border: 1px solid greenyellow;background-color: #00A477;}</style></head><body><section><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div></section></body></html>order 排序 数值越小越靠前
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">section{width: 1000px;height: 600px;border: 1px solid green;/*设置拉伸属性要给父类！！！*/display: flex;/*flex-wrap: wrap; 是否换行*//*justify-content: flex-start;*//*justify-content: flex-end;*/ /*从父盒子右边添加*//*justify-content: center;*/ /*从父盒子中心添加*//*justify-content: space-around;*/ /*在各控件之前之间之后平局分配空白区域*/flex-wrap: wrap; /*必要时拆行拆列*/align-items: center; /*垂直居中*//*调整测轴对齐 垂直居中*/flex-direction: row;align-content: center; /*对战*/}div{width: 248px;height: 200px;border: 1px solid darkred;background-color: seagreen;}div:nth-child(7){background-color: pink;order: -1;}</style>
</head>
<body><section><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div></section>
</body>
</html>HTML CSS3变形移动、旋转、缩放、3d 、动画 拉伸布局等笔记相关推荐
- android 动画x轴旋转,Android Roate3dAnimation实现围绕y轴竖直方向或者绕x轴方向旋转的3d动画效果...
概要: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Roate3dAnim ...
- CSS-0813(重复性)线性/径向渐变-过渡属性transition-变形属性transform变形位移旋转缩放倾斜视域函数perspective变形原点三角形居中方法
title: "CSS 0813-渐变&过渡&变形" date: 2022-08-15T09:43:28+08:00 文章目录 title: "CSS 0 ...
- java3D实现空间立方体,纯CSS3实现一个旋转的3D立方体盒子
简单介绍 上网易前端微专业课程,里面有一个课外作业是实现一个3D旋转立方体.花了点时间做了下.还有点意思.写个简单教程.供大家学习. 先放上终于要实现的效果 注:代码在chrome 43.0.2357 ...
- CSS3 -- API学习 (2D、3D动画效果)
一.2D效果 1.translate(xpx,ypx).translateX(xpx),translateY(ypx) 右平移xpx,左平移ypx <!DOCTYPE html&g ...
- 前端学习：jQuery--轮播图，旋转缩放平移动画，仿华为商城案例
1.火狐浏览器超好用的网页翻译插件 火狐浏览器超好用的网页翻译插件_m0_59805351的博客-CSDN博客_火狐翻译插件哪个好学习目标:自主安装火狐浏览器网页翻译插件学习内容:提示:这里可以添加要 ...
- android3d动画的实现,【转】Android 实现3d动画旋转效果
Roate3dAnimation 实现了围绕y轴竖直方向 或者绕x轴方向旋转的3d动画效果.这个例子来 自Android APIDemo中的一个自定义View动画.他的实现展示自定义View动画的基本 ...
- 第七章：CSS3基础---变形旋转 2d/3d、c3边框图片、变形缩放 2d/3d、变形倾斜2d、动画属性
<1..变形旋转 2d/3d> x轴旋转 transform:rotateX(数值deg) y轴旋转 transform:rotateY(数值deg) z轴旋转 transform:rot ...
- CSS3变形和动画：旋转、扭曲、缩放、位移、矩阵 、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration...
无意中发现了一个巨牛的人工智能教程,忍不住分享一下给大家.教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家.点这里可以跳转到教程. 旋转.扭曲.缩放.位移.矩阵 ...
- css3平移、旋转、倾斜、缩放、动画效果的实现
HTML代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
最新文章
- NodeJS+Mongodb+Express做CMS博客系统
- c++函数返回值与引用
- 在Windows Server 2008的桌面上显示“我的电脑”“网上邻居”等图标？
- opencv学习笔记2--存取图像元素
- c语言ax2bxc0,c语言程序用函数怎么输出ax2bxc=0?用C语言编号一个程序， 爱问知识人...
- 数字图像处理与分析_图像增强
- python表示倍数的英语句型_英语倍数表达法
- Flutter HotRealod详解
- 微软招 HR 了！看来是招聘需求太旺盛，忙不过来了
- chrome最简单的多开方法
- Redis端口为什么是6379?
- RTNETLINK answers: File exists的解决方案
- psutil：系统、进程，信息都在我的掌握之中
- python字符串替换中文_python -- 字符串的替换-Go语言中文社区
- ❤超级牛批，暴力破解聊天记录文件 ❤
- Excel表格中输入一个姓，就可以选择输入需要的姓名了
- node.js邮箱验证码
- 北京邦威思创科技有限公司 招聘要求
- 路劲规划与轨迹跟踪学习4——人工势场法
- 数据库原理及应用（东南大学）笔记——第二章 数据模型