CSS3 2D转换----x y
css3转换可以对元素进行移动,缩放,转动,拉长或者拉伸
转换的效果是让某个元素改变形状,大小和位置
3D转换则是X,Y,Z
2D转换
translate(x,y) 移动像素
rotate() 旋转角度
scale(x,y) 缩放拉伸
skew() 旋转倾斜
matrix()
过渡
* 2D转换 transform 一定要和transition配合
* transition 设置过度的时间,过度的类型
* width,height,transform(改变)
动画:
CSS3 可以创建动画,它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果
@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
还可以用百分比来标识时间
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
当你鼠标放入上面,会显示另一种图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style>
.myCard {
position: relative;
cursor: pointer;
width: 240px;
height: 300px;
transition: 1s ease-in-out;
transform-style: preserve-3d;
}
.myCard:hover {
transform: rotateY(0.5turn);
}
.card_img {
position: absolute;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
transition: 1s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: 1s ease-in-out;
-webkit-box-reflect: below 0 linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.4));
}
.card_img img {
width: 240px;
height: 300px;
}
.myCard .card_before {
transform: rotateY(180deg);
}
</style>
<div class="myCard">
<div class="card_img card_before">
<img src="../../img/1.jpg" />
</div>
<div class="card_img card_after">
<img src="../../img/0.jpg" />
</div>
</div>
</body>
</html>
圆形无限旋转
<style>
/**
* 特别注意:动画是from一个css样式
* to 一个css样式
*/
@keyframes towFrames{
from{
transform: rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
.two{
height: 100px;
width: 100px;
background-color: olivedrab;
border-radius: 50% 50%;
animation: towFrames 5s linear infinite;
text-align: center;line-height: 100px;
}
</style>
<div class="two">
旋转
</div>