animation:
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myname 5s linear 2s infinite alternate;
}
@keyframes myname
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
transition过渡:
div {
width: 100px;
height: 100px;
background: yellow;
-webkit-transition: width 2s, height 2s,background 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, background 2s,transform 2s;
}
div:hover {
width: 200px;
height: 200px;
background: green;
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
2d转换:
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
{
transform:translate(50px,10px);
-ms-transform:translate(50px,10px); /* IE 9 */
-webkit-transform:translate(50px,10px); /* Safari and Chrome */
}
rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
{
transform:rotate(30deg);
-webkit-transform:rotate(30deg); /* Safari and Chrome */
}
scale()方法，该元素增加或减少的大小(倍数)，取决于宽度（X轴）和高度（Y轴）的参数：
div:hover{
-ms-transform: scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */
}
利用matrix()方法旋转div元素30°
div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}
skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度。
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}
3d转换
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。
3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数；
3D旋转：CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数；
3D缩放：CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数；
3D矩阵：CSS3中3D变形中和2D变形一样也有一个3D矩阵功能函数matrix3d()。
div
{
transform: rotateX(120deg);//rotateX()方法，围绕其在一个给定度数X轴旋转的元素
transform: rotateY(130deg);//rotateY()方法，围绕其在一个给定度数Y轴旋转的元素
-webkit-transform: rotateX(120deg); /* Safari 与 Chrome */
}
<style>
div{
width: 200px;
height: 200px;
margin: 0 auto;
/*修改基本样式*/
}
.div1{
margin-top: 100px;
transform: perspective(400px) rotatex(0deg) rotatey(0deg);
/*拥有近大远小透视效果*/
transform-style: preserve-3d;
/*设置为3d空间*/
position: relative;
border:1px solid #000000;
animation: xuanzhuan 5s cubic-bezier(0.0,0.0,0.0,0.0) infinite forwards;
/*旋转动画*/
}
.div1 div{
position: absolute;
font-size: 80px;
line-height: 200px;
text-align: center;
top: 0;
left: 0;
/*内部样式*/
}
.div1_1{
transform: translatez(100px);
background-color: red;
/*向前移动100像素，作为最前面的面*/
}
.div1_2{
transform: rotatex(90deg) translatez(100px);
background-color:green;
/*绕x轴旋转90度，在z轴正方向移动100像素，作为上面的面*/
/*注：旋转时坐标系会跟着一起旋转，z轴原来是垂直屏幕向外的，绕x轴旋转90度以后就是在屏幕上向上的方向*/
}
.div1_3{
transform: rotatex(180deg) translatez(100px);
background-color: blue;
/*绕x轴旋转180度，这时z轴垂直屏幕向内，在z轴正方向移动100像素，作为后面的面*/
}
.div1_4{
transform: rotatex(270deg) translatez(100px);
background-color: purple;
/*绕x轴旋转270度，这时z轴向下，在z轴正方向移动100像素，作为下面的面*/
}
.div1_5{
transform: rotatey(90deg) translatez(100px);
background-color: pink;
/*绕y轴旋转90度，这时z轴向右，在z轴正方向移动100像素，作为右面的面*/
}
.div1_6{
transform: rotatey(270deg) translatez(100px);
background-color: yellow;
/*绕y轴旋转90度，这时z轴向左，在z轴正方向移动100像素，作为左面的面*/
}
@-webkit-keyframes xuanzhuan{
from{
transform:perspective(400px) rotatex(0deg);
}
to{
transform:perspective(400px) rotatex(360deg);
}
}
.div1:hover{
transform: perspective(400px) scale(1.5);
animation: xuanzhuan 5s cubic-bezier(0.0,0.0,0.0,0.0) infinite paused forwards;
/*有hover事件是动画暂停*/
}
</style>
<div class="div1">
<div class="div1_1">1</div>
<div class="div1_2">2</div>
<div class="div1_3">3</div>
<div class="div1_4">4</div>
<div class="div1_5">5</div>
<div class="div1_6">6</div>
</div>
<style>
* {
margin: 0;
padding: 0;
/*去除默认边距*/
}
ul {
width: 200px;
height: 200px;
border: 1px solid #000;
box-sizing: border-box;
margin: 100px auto;
position: relative;
/*修改基本样式*/
transform: rotateY(45deg) rotateX(45deg);
/*旋转看看效果*/
transform-style: preserve-3d;
/*将父元素设置为3d空间*/
}
ul li {
list-style: none;
width: 200px;
height: 200px;
font-size: 60px;
text-align: center;
line-height: 200px;
position: absolute;
left: 0;
top: 0;
/*修改基本样式*/
}
ul li:nth-child(1) {
background-color: red;
transform: translateX(-100px) rotateY(90deg);
/*将第一个l向左移动100像素，然后绕y轴旋转90度，形成左边的面*/
}
ul li:nth-child(2) {
background-color: green;
transform: translateX(100px) rotateY(90deg);
/*将第一个2向右移动100像素，然后绕y轴旋转90度*，形成右边的面*/
}
ul li:nth-child(3) {
background-color: blue;
transform: translateY(-100px) rotateX(90deg);
/*将第一个3向上移动100像素，然后绕x轴旋转90度，形成上面的面*/
}
ul li:nth-child(4) {
background-color: yellow;
transform: translateY(100px) rotateX(90deg);
/*将第一个4向下移动100像素，然后绕x轴旋转90度*/
}
ul li:nth-child(5) {
background-color: purple;
transform: translateZ(-100px);
/*将第一个5向后移动100像素，形成后面的面*/
}
ul li:nth-child(6) {
background-color: pink;
transform: translateZ(100px);
/*将第一个l向前移动100像素，形成前面的面*/
}
</style>
<ul>
<!--首先做好html布局，正方体有6个面，所以写了6个li-->
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
网友评论