css3动画——正方体旋转
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画</title>
<style>
* {
margin: 0;padding: 0;
}
body {
transform-style: preserve-3d;
}
.contanier {
margin: 100px auto;
width: 300px;
height: 300px;
position: relative;
/* transform--style属性指定嵌套元素是怎样在三维空间中呈现。
语法：transform-style:flat|preserve-3d;
flat 表示所有子元素在2D平面呈现。
preserve-3d 表示所有子元素在3D空间中呈现。 */
transform-style: preserve-3d;
/* 设置旋转元素的基点位置：
默认值：50% 50% 0 */
transform-origin: center center;
/* 语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔。
animation-iteration-count 定义动画的播放次数。infinite 无限的
animation-direction 指定是否应该轮流反向播放动画。 alternate 先执行一遍动画，然后再反向执行一遍动画：
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state 指定动画是否正在运行或已暂停。 */
animation: rotate 20s linear infinite alternate;
/* 语法：perspective: number|none;
number 元素距离视图的距离，以像素计。
none 默认值。与 0 相同。不设置透视。
设置元素被查看位置的视图
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
注释：perspective 属性只影响 3D 转换元素。 */
/* perspective: 120px; */
/* 语法：perspective-origin: x-axis y-axis;
x-axis 定义该视图在 x 轴上的位置。默认值：50%。
y-axis 定义该视图在 y 轴上的位置。默认值：50%。
注释：该属性必须与 perspective 属性一同使用，而且只影响 3D 转换元素。
当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。
设置 3D 元素的基点位置： */
perspective-origin: left top;
}
.item {
width: 300px;
height: 300px;
position: absolute;
text-align: center;
/*line-height 使用百分比设置行高，不允许负值
normal 默认。设置合理的行间距。
number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。
inherit 规定应该从父元素继承 line-height 属性的值。 */
line-height: 300px;
}
.item:nth-child(1){
background-color: rgba(235, 35, 195, 0.877);
transform:rotateY(180deg) translateZ(150px);
}
.item:nth-child(2){
background-color: rgba(221, 29, 54, 0.712);
transform:rotateX(-90deg) translateZ(150px);
}
.item:nth-child(3){
background-color: rgba(24, 218, 69, 0.877);
transform:rotateY(90deg) translateZ(150px);
}
.item:nth-child(4){
background-color: rgba(24, 199, 196, 0.5);
transform:rotateX(90deg) translateZ(150px);
}
.item:nth-child(5){
background-color: rgba(16, 20, 226, 0.938);
transform:rotateY(-90deg) translateZ(150px);
}
.item:nth-child(6){
background-color: rgba(257,135,22,0.5);
transform:translateZ(150px);
}
/* 语法:@keyframes animationname {keyframes-selector {css-styles;}}
animationname 必需的。定义animation的名称。
keyframes-selector 必需的。动画持续时间的百分比。
css-styles 必需的。一个或多个合法的CSS样式属性
指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。
注意: @keyframes 规则 不兼容 IE 9 以及更早版本的浏览器. */
/* @keyframes rotate{
0%{transform:rotateY(0deg) rotateX(0deg)}
50%{transform:rotateY(180deg) rotateX(-10deg)}
100%{transform:rotateY(360deg) rotateX(0deg)}
} */
@keyframes rotate{
0%{
transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
}
100%{
transform: rotateX(360deg) rotateZ(360deg);
}
}
</style>
</head>
<body>
<div class="contanier">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
</html>
运行结果如图：
版权声明：本文为m0_48845795原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。