-
rotateX
-
rotateY
-
rotateZ
-
3D移动
有趣的小案例：
rotateX
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
body {
perspective: 200px;
}
img {
display: block;
margin: 100px auto;
transition: all 5s;
}
img:hover {
transform: rotateX(360deg);
}
style>
head>
<body>
<img src="x.jpg" alt="">
body>
html>
返回顶层目录
rotateY
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
body {
perspective: 500px;
}
img {
display: block;
margin: 100px auto;
transition: all 4s;
}
img:hover {
transform: rotateY(360deg);
}
style>
head>
<body>
<img src="y.png" width="300" alt="">
body>
html>
返回顶层目录
rotateZ
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
body {
perspective: 500px;
}
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover {
transform: rotateZ(360deg);
}
style>
head>
<body>
<img src="y.png" width="300" alt="">
body>
html>
返回顶层目录
3D移动
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
body {
perspective: 500px;
}
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 1s;
}
div:hover {
transform: translateX(100px);
}
style>
head>
<body>
<div>div>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
body {
perspective: 500px;
}
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 1s;
}
div:hover {
transform: translate3d(50%,50%,200px);
}
h1 {
transform: translate3d(0,100px,0);
transition: all 1s;
}
h1:hover {
transform: translate3d(0,0,0);
}
style>
head>
<body>
<h1>每一个今天胜似无数个昨天h1>
<div>div>
body>
html>
返回顶层目录
有趣的小案例：
开门见帅哥
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
section {
width: 450px;
height: 300px;
background: url(3.jpg) no-repeat;
margin: 100px auto;
position: relative;
perspective: 1000px;
}
section div {
position: absolute;
top: 0;
width: 50%;
height: 100%;
background: url(bg.png);
transition: all 2s;
}
.door-l {
left: 0;
transform-origin: left;
}
.door-r {
right: 0;
transform-origin: right;
}
.door-l::before,.door-r::before {
content: "";
position: absolute;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid #000;
top: 50%;
transform: translateY(-50%);
}
.door-l::before {
right: 6px;
}
.door-r::before {
left: 6px;
}
section:hover .door-l {
transform: rotateY(-130deg);
}
section:hover .door-r {
transform: rotateY(130deg);
}
style>
head>
<body>
<section>
<div class="door-l">div>
<div class="door-r">div>
section>
body>
html>
返回顶层目录
两面翻转
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
div {
width: 224px;
height: 124px;
margin: 100px auto;
position: relative;
}
div img {
position: absolute;
top: 0;
left: 0;
transition: all 1s;
}
div img:first-child {
z-index: 1;
backface-visibility: hidden;
}
div:hover img {
transform: rotateY(180deg);
}
style>
head>
<body>
<div>
<img src="qian.svg" alt="">
<img src="hou.svg" alt="">
div>
body>
html>
返回顶层目录
CSS动画
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
div {
width: 120px;
height: 120px;
background-color: pink;
animation: run 4s ease 0s infinite alternate;
}
@keyframes run {
from {
transform: translateX(0);
}
to {
transform: translateX(500px);
}
}
style>
head>
<body>
<div>div>
body>
html>
返回顶层目录
多组动画
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
div {
width: 120px;
height: 120px;
background-color: pink;
animation: run 4s ease 0s infinite;
}
@keyframes run {
0% {
transform: translate3d(0,0,0);
}
25% {
transform: translate3d(600px,0,0);
}
50% {
transform: translate3d(600px,400px,0);
}
75% {
transform: translate3d(0,400px,0);
}
100% {
transform: translate3d(0,0,0);
}
}
style>
head>
<body>
<div>div>
body>
html>
返回顶层目录
返回目录
