CSS3 transition过渡，transform2D移动 translate 旋转 rotate 缩放 scalse， animation动画，.transform: translate3d详解
filter:函数()
<title>Document</title>
<style>
img{
filter: blur(5px);
}
img:hover{
filter: blur(0);
}
</style>
</head>
<body>
<!-- filter csss属性将模糊或颜色便宜等图形效果应用于元素 -->
<!-- filter:函数() filter:blur(5px);blur模糊处理 数值越大越模糊 -->
<img src=".././imgs/bg.gif" alt="">
</body>
</html>
2. calc() 函数
<!-- css3 cal函数 -->
<!-- calc()此css函数让你在声明css属性值执行一些计算 -->
<!-- 括号里面可以使用+-*/来进行计算 -->
<style>
.father{
width: 300px;
height: 200px;
background-color: pink;
}
.son{
width: calc(250 - 30px);
height: 30px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
3.transition过渡
<title>Document</title>
<style>
<!-- 过渡动画:是从一个状态渐渐的过渡到另一个状态，经常和:hover一起用 -->
<!-- transition:要过渡的属性 花费时间 运动曲线 何时开始 -->
div{
width: 200px;
height: 100px;
background-color: pink;
/* transition: width .5s ease 1s; */
/* transition: height .5s ease 1s; 没变化 */
/* 如果想要写多个属性，利用逗号隔开 */
transition:width .5s,height .5s ;
/* 如果想要多个属性都变化，属性写all就可以了 */
/* 谁做过渡给谁加 */
transition: all .5s;
}
div:hover{
width: 400px;
height: 500px;
background-color: lawngreen;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
案列：transition 进度条
<title>Document</title>
<style>
.bar{
width: 150px;
height: 15px;
border: 1px solid red;
border-radius:7px ;
padding: 1px;
transition: all 10s;
}
.bar_in{
width: 50%;
height: 100%;
background-color: red;
}
.bar:hover .bar_in{
width: 100%;
}
</style>
</head>
<body>
<div class="bar">
<div class="bar_in"></div>
</div>
</body>
</html>
4. transform: translate()位移
<title>Document</title>
<style>
<!-- 实现元素的位移，旋转，缩放等效果 -->
<!-- 移动 translate 旋转 rotate 缩放 scalse -->
<!-- 移动盒子的位置:定位 盒子的外边距 2d的转换移动 -->
div{
width: 200px;
height: 200px;
background-color: pink;
/* x就是x轴上移动位置，y轴就是y轴上移动位置，中间用逗号隔开 */
transform: translate(x,y);
transform: translate(100px,100px);
/* 只移动x轴 */
transform: translate(100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
案列：让盒子水平居中
<title>Document</title>
<style>
div{
position: relative;
width: 400px;
height: 400px;
/* 我们tansform里面的参数可以用%
如果里面的参数据哦%移动的距离是盒子自身的宽度或则高度来对比的
这里的50%就是50px，因为盒子的宽度是100px */
background-color: pink;
/* transform: translateX(50%); */
}
p{
position: absolute;
top:50%;
left: 50%;
width: 200px;
height: 200px;
background-color: purple;
/* margin-top: -100px;
margin-left: -100px; */
/* 盒子往上走自已高度的一半 */
transform: translate(-50%,-50%);
}
span{
/* transform对于行内元素是无效的 */
transform:translate(300px,300px);
}
</style>
</head>
<body>
<div>
<p></p>
</div>
<span></span>
</body>
</html>
5.transform: rotate()旋转;
<title>Document</title>
<style>
img{
width: 150px;
border-radius: 50%;
/* 顺时针旋转45度 */
/* transform: rotate(45deg); */
border: 5px solid pink;
margin-left: 100px;
margin-top: 100px;
/* 过渡写到本身上，说做动画给谁加 */
transition: all 0.3s;
}
img:hover{
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="../imgs/hey.jpg" alt="">
</body>
</html>
案例：旋转三角形
<title>Document</title>
<style>
div{
position: relative;
width: 400px;
height: 40px;
border: 1px solid #000;
}
div::after{
content: '';
position: absolute;
top: 8px;
right: 15px;
width: 10px;
height: 10px;
border-right: 1px solid red;
border-bottom: 1px solid red;
transform:rotate(45deg);
transition: all .7s;
}
div:hover::after{
transform: rotate(225deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
6.ransform-origin转换的中心点
<title>Document</title>
<style>
<!-- 我们可以设置元素转换的中心点 -->
<!-- transform-origin:x,y -->
div{
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 1s;
/* 可以跟方位名词 */
/* transform-origin: left bottom; */
/* 默认是50% 50%相当于center center */
/* 可以设置像素 */
transform-origin:50px 50px ;
}
div:hover{
transform: rotate(360deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
案例：旋转中心点
<title>Document</title>
<style>
div{
overflow: hidden;
width: 200px;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
float: left;
}
div::before{
content: '嘿嘿';
display: block;
width: 100%;
height: 100%;
background-color: hotpink;
transition: all .6s;
transform: rotate(180deg);
transform-origin:left bottom;
}
div:hover::before{
transform: rotate(0);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
7.transform: scale()缩放
<title>Document</title>
<style>
<!-- 可以放大和缩小。只要给元素添加了这个属性就能控制它的放大和缩小 -->
<!-- transform:scale(x,y) -->
div{
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all .5s;
transform-origin:left bottom ;
}
div:hover{
/* transform: scale(x,y);里面写的数字不跟单位就是倍数 */
/* 修改了宽度为原来的倍，高度不变 */
/* transform: scale(2,2); */
/* 等比例缩放同时修改宽度和高度，有简单的写法 */
transform: scale(2);
/* 我们可以进行缩放，小于1就是缩放 */
/* transform: scale(0.5,0.5); */
/* transform: scale(0.5) */
/* scale的优势之处:不会影响其它的盒子，而且可以设置缩放的中心点 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
案例：图片放大
<title>图片放大</title>
<style>
div{
float: left;
width: 400px;
height: 200px;
margin: 10px;
overflow: hidden;
}
div img{
width: 100%;
height: 100%;
transition: all 0.6s;
}
div img:hover{
transform: scale(1.1);
}
</style>
</head>
<body>
<div><a href=""><img src="../imgs/04.jpg"></a></div>
<div><a href=""><img src="../imgs/04.jpg"></a></div>
<div><a href=""><img src="../imgs/04.jpg"></a></div>
</body>
</html>
案列：分页按钮
<title>分页按钮</title>
<style>
li{
float: left;
width:30px ;
height: 30px;
border: 1px solid #000;
margin: 10px;
text-align: center;
line-height: 30px;
list-style: none;
border-radius: 50%;
cursor: pointer;
transition: all .4s;
}
li:hover{
transform: scale(1.2);
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
</html>
8. transform总结
<title>总结</title>
<style>
div{
width: 200px;
height: 200px;
margin: 100px auto;
background-color: pink;
transition: all .4s;
}
div:hover{
/* transform: rotate(180deg)translate(150px,50px) ; */
/* 我们同时有位移和其他属性，我们需要把位移放到最前面 */
transform: translate(150px,50px) rotate(180deg)scale(1.2);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
9. animation动画
<title>动画</title>
<style>
<!-- 可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果 -->
<!-- 先定义动画 在使用(调用)动画 -->
/* 我们一打开页面，一个盒子就从左边走到右边 */
/* 定义动画 */
@keyframes move{
/* 开始的状态 */
0%{
/* width:100px; */
transform: translateX(0px);
}
/* 结束状态 */
100%{
/* height: 100px; */
transform: translateX(1000px);
}
}
div{
width: 200px;
height: 200px;
background-color: aqua;
/* margin: 100px auto; */
/* 调用动画 */
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
案例:form和to
<title>form和to</title>
<style>
/* from和to等价于0% 和100% */
/* @keyframes move{
form{
transform:translate(0,0)
}
to{
transform: translate(1000px,0);
}
} */
@keyframes move{
0%{
transform: translate(0.0);
}
25%{
transform: translate(100px,0);
}
50%{
transform:translate(1000px,500px);
}
75%{
transform: translate(0,500px);
}
100%{
transform: translate(0,0);
}
}
/* 动画序列 */
div{
width: 100px;
height: 100px;
background-color: aqua;
animation-name: move;
animation-duration: .4s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
动画属性
<title>动画属性</title>
<style>
@keyframes move{
0%{
transform: translate(0,0);
}
100%{
transform: translate(1000px,0);
}
}
div{
width: 100px;
height: 100px;
background-color: pink;
/* 调用动画 */
animation-name: move;
/* 持续时间 */
animation-duration:2s;
/* 运动曲线 */
animation-timing-function: ease;
/* 何时开始 */
animation-delay: 1s;
/* 重复次数 iteration重复的count次数 infinite */
animation-iteration-count: infinite;
/* 是否反方向播放 默认noraml */
animation-direction: alternate;
/* 动画结束后的状态，默认是backwards,回到起始状态， */
animation-fill-mode: backwards;
/* animation:动画名称，持续时间 运动曲线 何时开始 播方次数 是否反方向 动画起始或则结束的状态 */
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
animation: move 2s ease 1s infinite alternate backwards;
}
div:hover{
/* 鼠标经过div，让这个div停止动画，鼠标离开后就继续动画 */
animation-play-state: paused;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
10.transform: translate3d
<title>Document</title>
<style>
body{
/* 透视写到被观察元素的父盒子上 */
perspective: 200px;
}
div{
width: 200px;
height: 200px;
background-color: pink;
/* transform: translateX(100px);
transform: translateY(100px); */
transform:translateX(100px)translateY(100px) translateZ(100px) ;
/* translateZ沿着Z轴移动 后面的单位我们一般跟px */
/* translateZ(100px)向外移动100px */
/* 3D移动有简写的方法 */
transform: translate3d(x,y,z);
transform: translate3d(100px,100px,100px);
/* xyz不能省略的，如果没有就写0 */
transform: translate3d(0,100px,100px)；
}
</style>
</head>
<body>
<div></div>
</body>
</html>
10.(1) transform: translateZ（）
<title>z轴平移</title>
<style>
body{
perspective: 500px;
}
div{
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transform: translateZ(0);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
（2） transform: rotateZ();
<title>z轴旋转</title>
<style>
body{
perspective: 300px;
}
img{
display: block;
width: 400px;
height: 400px;
margin: 100px auto;
transition: all 1s;
}
img:hover{
/* transform: rotateX(-45deg); */
/* transform: rotateY(180deg); */
transform: rotateZ(180deg);
}
</style>
</head>
<body>
<img src="../imgs/1.jpg" alt="" srcset="">
</body>
</html>
(3)transform-style: preserve-3d
<title>transform-style</title>
<style>
body{
perspective: 300px;
}
.box{
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
border: 1px solid #000000;
transition: all 2s;
/* 让子元素保持3d立体空间环境 */
transform-style: preserve-3d;
}
.box:hover{
transform: rotateY(60deg);
}
.box div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
}
.box div:last-child{
background-color: purple;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>
</html>