<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="img/mynote.ico"/>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<title>transform动画</title>
<style type="text/css">
#div1 {
width: 300px;
height: 300px;
margin: 0 auto;
position: relative;
top: 100px;
/*给予元素3d属性*/
transform-style: preserve-3d;
/*transform-origin 属性用来设置 transform 变换的基点位置。默认情况下，基点位置为元素的中心点*/
transform-origin: 0 0 0;
/*animation 属性是一个简写属性，用于设置六个动画属性
animation-name 动画名字
animation-duration 动画持续时间
animation-timing-function 动画的速度曲线(匀速为linear)
animation-delay 动画开始之前的延迟
animation-iteration-count 动画应该播放的次数(无数次为infinite)
animation-direction 是否应该轮流反向播放动画(反向为alternate)*/
animation: xuanZhuan 10s linear 2s infinite alternate;
}
#div1>img {
position: absolute;
top: 0;
}
#img1 {
/*沿Z轴平移*/
transform: translateZ(150px);
}
#img2 {
transform: translateZ(-150px);
}
#img3 {
/*沿X轴旋转*/
transform: rotateX(90deg) translateZ(150px);
}
#img4 {
transform: rotateX(-90deg) translateZ(150px);
}
#img5 {
transform: rotateY(90deg) translateZ(150px);
}
#img6 {
transform: rotateY(-90deg) translateZ(150px);
}
/*声明一个名字为 xuanzhuan 的动画*/
@keyframes xuanZhuan {
0% {
/*scale 缩放效果*/
transform: rotateY(0) rotateX(45deg) rotateZ(45deg) scale(0.5, 0.5) scaleZ(0.5);
}
50% {
transform: rotateY(180deg) rotateX(45deg) rotateZ(45deg) scale(2, 2) scaleZ(2);
}
100% {
transform: rotateY(360deg) rotateX(45deg) rotateZ(45deg) scale(0.5, 0.5) scaleZ(0.5);
}
}
</style>
</head>
<body>
<div id="div1">
<img src="img/1.jpg" id="img1" />
<img src="img/2.jpg" id="img2" />
<img src="img/3.jpg" id="img3" />
<img src="img/4.jpg" id="img4" />
<img src="img/5.jpg" id="img5" />
<img src="img/6.jpg" id="img6" />
</div>
</body>
</html>
3414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
