CSS创建3D，抠像旋转图片等动画的标签，动画特效，轮播图，旋转木马等【诗书画唱】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background-color:black;
}
*{
margin: 0;
padding: 0;
}
#main img{
width:300px;
height: 400px;
position: absolute;
/* absolute:绝对*/
border:5px blue double;
}
#main img:nth-child(1){
transform: translateZ(500px);
}
/* nth-child(1)代表第一个最正面的图片*/
/*:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
n 可以是数字、关键词或公式。*/
/* 这里z轴都为500px,就可以让10张图片都在同以个水平面上,*/
/*transform 英[trænsˈfɔːm]
美[trænsˈfɔːrm]
v. 使改变形态; 使改变外观(或性质); 使改观;*/
#main img:nth-child(2){
transform: rotateY(40deg) translateZ(500px);
}
/* translateZ(z) 定义 3D 转换，只是用 Z 轴的值。*/
#main img:nth-child(3){
transform: rotateY(80deg) translatez(500px);
}
/* rotateY(angle) 定义沿着 Y 轴的 3D 旋转。*/
#main img:nth-child(4){
transform: rotateY(120deg) translatez(500px);
}
#main img:nth-child(5){
transform: rotateY(160deg) translatez(500px);
}
#main img:nth-child(6){
transform: rotateY(200deg) translatez(500px);
}
#main img:nth-child(7){
transform: rotateY(240deg) translatez(500px);
}
#main img:nth-child(8){
transform: rotateY(280deg) translatez(500px);
}
#main img:nth-child(9){
transform: rotateY(320deg) translatez(500px);
}
/*# id选择器 id不能重复命名*/
#main{
margin: 100px auto;/*让父元素居中*/
width: 300px;
height: 400px;
/*声明一个3D空间*/
transform-style: preserve-3d;
/*preserve 英[prɪˈzɜːv]
美[prɪˈzɜːrv]
v.（ 保护; 维护; 保留; ）维持…的原状（; 保存; 保养; 贮存; 保鲜;
n. (某人或群体活动、工作等的) 专门领域; 果酱; 腌菜; 泡菜;）*/
transform: rotateX(-10deg);
animation-name: animate;
animation-duration: 10s; /*动画执行次数*/
/*duration 英[djuˈreɪʃn]
美[duˈreɪʃn]
n. 持续时间; 期间;*/
animation-iteration-count: infinite; /*动画持续时间：无限 */
animation-timing-function: linear;
position: relative;
/*relative 英[ˈrelətɪv]
美[ˈrelətɪv]
adj. 相比较而言的; 比较的; 相对的; 相关联的; 相比之下存在(或有)的;*/
}
/*定义一个动画*/
@keyframes animate {
0%{
transform: rotateX(-10deg) rotateY(0deg) ;
}
100%{
transform: rotateX(-10deg) rotateY(360deg) ;
}
}
/*使用@keyframes规则，你可以创建动画。
创建动画是通过逐步改变从一个CSS样式设定到另一个。
在动画过程中，您可以更改CSS样式的设定多次。
指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。
0％是开头动画，100％是当动画完成。
为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器。
注意: 使用animation属性来控制动画的外观，还使用选择器绑定动画。.*/
</style>
<!--<script>
window.onload=function(){
var imgs=document.getElementsByTagName("img");
for(var i of imgs){
i.onmouseover=function(){
if(this.title=="a"){
this.src="2.png";
}
}
i.onmouseout=function(){
this.src="1.png";
}
}
}
</script>-->
</head>
<body>
<div id="main">
<img src="1.png" title="a"/>
<img src="2.png" title="a"/>
<img src="3.png" title="a"/>
<img src="4.png" title="a"/>
<img src="5.png" title="a"/>
<img src="6.png" title="a"/>
<img src="7.png" title="a"/>
<img src="8.png" title="a"/>
<img src="9.png" title="a"/>
<img src="10.png" title="a"/>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background-color:green;
}
*{
margin: 0;
padding: 0;
}
#main img{
width:300px;
height: 400px;
position: absolute;
/* absolute:绝对*/
border:5px blue double;
border-radius: 90%;
}
#main img:nth-child(1){
transform: translateZ(500px);
}
/* nth-child(1)代表第一个最正面的图片*/
/*:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
n 可以是数字、关键词或公式。*/
/* 这里z轴都为500px,就可以让10张图片都在同以个水平面上,*/
/*transform 英[trænsˈfɔːm]
美[trænsˈfɔːrm]
v. 使改变形态; 使改变外观(或性质); 使改观;*/
#main img:nth-child(2){
transform: rotateY(40deg) translateZ(540px);
}
/* translateZ(z) 定义 3D 转换，只是用 Z 轴的值。*/
#main img:nth-child(3){
transform: rotateY(80deg) translatez(580px);
}
/* rotateY(angle) 定义沿着 Y 轴的 3D 旋转。*/
#main img:nth-child(4){
transform: rotateY(120deg) translatez(620px);
}
#main img:nth-child(5){
transform: rotateY(160deg) translatez(660px);
}
#main img:nth-child(6){
transform: rotateY(200deg) translatez(700px);
}
#main img:nth-child(7){
transform: rotateY(240deg) translatez(740px);
}
#main img:nth-child(8){
transform: rotateY(280deg) translatez(780px);
}
#main img:nth-child(9){
transform: rotateY(320deg) translatez(820px);
}
/* nth-child(1)代表第一个最正面的图片*/
/*:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
n 可以是数字、关键词或公式。*/
/* 这里z轴都为500px,就可以让10张图片都在同以个水平面上,*/
/*transform 英[trænsˈfɔːm]
美[trænsˈfɔːrm]
v. 使改变形态; 使改变外观(或性质); 使改观;*/
#main img:nth-child(10){
transform: translateZ(500px);
}
#main img:nth-child(11){
transform: rotateX(40deg) translateZ(540px);
}
/* translateZ(z) 定义 3D 转换，只是用 Z 轴的值。*/
#main img:nth-child(12){
transform: rotateX(80deg) translatez(580px);
}
/* rotateY(angle) 定义沿着 Y 轴的 3D 旋转。*/
#main img:nth-child(13){
transform: rotateX(120deg) translatez(620px);
}
#main img:nth-child(14){
transform: rotateX(160deg) translatez(660px);
}
#main img:nth-child(15){
transform: rotateX(200deg) translatez(700px);
}
#main img:nth-child(16){
transform: rotateX(240deg) translatez(740px);
}
#main img:nth-child(17){
transform: rotateX(280deg) translatez(780px);
}
#main img:nth-child(18){
transform: rotateX(320deg) translatez(820px);
}
/*# id选择器 id不能重复命名*/
#main{
margin: 100px auto;/*让父元素居中*/
width: 300px;
height: 400px;
/*声明一个3D空间*/
transform-style: preserve-3d;
/*preserve 英[prɪˈzɜːv]
美[prɪˈzɜːrv]
v.（ 保护; 维护; 保留; ）维持…的原状（; 保存; 保养; 贮存; 保鲜;
n. (某人或群体活动、工作等的) 专门领域; 果酱; 腌菜; 泡菜;）*/
transform: rotateX(-10deg);
animation-name: animate;
animation-duration: 1s; /*动画执行的过渡时间*/
/*duration 英[djuˈreɪʃn]
美[duˈreɪʃn]
n. 持续时间; 期间;*/
animation-iteration-count: infinite; /*动画持续时间：无限 */
animation-timing-function: linear;
position: relative;
/*relative 英[ˈrelətɪv]
美[ˈrelətɪv]
adj. 相比较而言的; 比较的; 相对的; 相关联的; 相比之下存在(或有)的;*/
}
/*定义一个动画*/
@keyframes animate {
0%{
transform:
rotateX(0deg)
/* rotateY(0deg) ;*/
rotateZ(0deg) ;
}
100%{
transform:
rotateX(360deg)
/* rotateY(360deg) ;*/
rotateZ(360deg) ;
}
}
/*使用@keyframes规则，你可以创建动画。
创建动画是通过逐步改变从一个CSS样式设定到另一个。
在动画过程中，您可以更改CSS样式的设定多次。
指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。
0％是开头动画，100％是当动画完成。
为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器。
注意: 使用animation属性来控制动画的外观，还使用选择器绑定动画。.*/
</style>
<!--<script>
window.onload=function(){
var imgs=document.getElementsByTagName("img");
for(var i of imgs){
i.onmouseover=function(){
if(this.title=="a"){
this.src="2.png";
}
}
i.onmouseout=function(){
this.src="1.png";
}
}
}
</script>-->
</head>
<body>
<div id="main">
<img src="1.png" title="a"/>
<img src="2.png" title="a"/>
<img src="3.png" title="a"/>
<img src="4.png" title="a"/>
<img src="5.png" title="a"/>
<img src="6.png" title="a"/>
<img src="7.png" title="a"/>
<img src="8.png" title="a"/>
<img src="9.png" title="a"/>
<img src="10.png" title="a"/>
<img src="1.png" title="a"/>
<img src="2.png" title="a"/>
<img src="3.png" title="a"/>
<img src="4.png" title="a"/>
<img src="5.png" title="a"/>
<img src="6.png" title="a"/>
<img src="7.png" title="a"/>
<img src="8.png" title="a"/>
<img src="9.png" title="a"/>
<img src="10.png" title="a"/>
</div>
</body>
</html>
Deg
[词典]【医】变性，退化，变质，度，程度;
