.box4
:hover
,
.box5
:hover
{
transform
:
translateY
(
-10px
);
box-shadow
:
10px
10px
10px
rgba
(
0
,
0
,
0
,
0.5
);
rotateX(a)函数功能等同于rotate3d(1,0,0,a)
rotateY(a)函数功能等同于rotate3d(0,1,0,a)
rotateZ(a)函数功能等同于rotate3d(0,0,1,a)
注：
a指的是一个旋转角度值。turn是圈，1turn = 360deg；另外还有弧度rad，2πrad = 1turn = 360deg。如，transform:rotate(2turn)
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*必须给文件设置一个视距*/
html{
-webkit-perspective: 800px;
body div{
width: 300px;
height: 300px;
margin: 10px auto;
img{
width: 300px;
height: 300px;
transition: all 2s 2s;
body:hover .box1 img{
transform: rotateX(90deg);
body:hover .box2 img{
transform: rotateY(0.3turn);
body:hover .box3 img{
/* transform: translateZ(100px) rotateY(180deg); */
/* 沿Y轴旋转后，坐标体系变化，Z轴朝里，所以Z值平移增大，是往画面里平移，所以反而越来越小。 */
transform: rotateY(180deg) translateZ(100px) ;
/* transform: translateX(50%) rotateZ(90deg); */
/* rotate3d根据空间坐标系进行一定角度旋转。 */
/* transform:rotate3d(1, 0.5, -0.5, 45deg); */
/* transform: rotateZ(90deg); */
</style>
</head>
<div class="box1"><img src="./动画/1024px-Analogue_clock_face.svg.png" alt=""></div>
<div class="box2"><img src="./动画/bg2.png" alt=""></div>
<div class="box3"><img src="./动画/复仇者/1.jpg" alt=""></div>
</body>
</html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.clock {
width: 500px;
height: 500px;
background-image: url(./动画/1024px-Analogue_clock_face.svg.png);
background-size: cover;
margin: 10px auto;
position: relative;
.clock>div {
position: absolute;
top: 0%;
bottom: 0%;
right: 0%;
left: 0px;
margin: auto;
.hour_wrapper {
width: 80%;
height: 80%;
/* background-color: aqua; */
/* 设置外容器旋转，让指针可以不围绕自身中心旋转。 */
animation: run 43200s linear infinite;
.hour {
height: 50%;
width: 6px;
background-color: black;
margin: 0 auto;
.min_wrapper {
width: 90%;
height: 90%;
/* background-color: aqua; */
/* 设置外容器旋转，让指针可以不围绕自身中心旋转。 */
animation: run 3600s linear infinite;
.min {
height: 50%;
width: 4px;
background-color: steelblue;
margin: 0 auto;
.sec_wrapper {
width: 95%;
height: 95%;
/* background-color: aqua; */
/* 设置外容器旋转，让指针可以不围绕自身中心旋转。 */
animation: run 60s steps(60) infinite;
.sec {
height: 50%;
width: 2px;
background-color: red;
margin: 0 auto;
@keyframes run {
from {
transform: rotateZ(0);
to {
transform: rotateZ(360deg);
</style>
</head>
<div class="clock">
<div class="hour_wrapper">
<div class="hour"></div>
<div class="min_wrapper">
<div class="min"></div>
<div class="sec_wrapper">
<div class="sec"></div>
</body>
</html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
perspective: 800px;
.cubic{
width: 200px;
height: 200px;
margin: 100px auto;
position: relative;
/* transform默认情况下是2D效果，需要3d效果需设置transform-style */
transform-style: preserve-3d;
animation: rotate 10s linear infinite;
.cubic div{
width: 200px;
height: 200px;
vertical-align: top;
position: absolute;
opacity: 0.8;
.box1{
transform: rotateY(90deg) translateZ(100px);
.box2{
transform: rotateY(-90deg) translateZ(100px);
.box3{
transform: rotateX(90deg) translateZ(100px);
.box4{
transform: rotateX(-90deg) translateZ(100px);
.box5{
transform: rotateX(-180deg) translateZ(100px);
.box6{
transform: rotateX(0deg) translateZ(100px);
@keyframes rotate {
from{
transform: rotate3d(0,0,0,0);
from{
transform: rotate3d(0.5,0.5,0.8,360deg);
</style>
</head>
<div class="cubic">
<div class="box1"><img src="./动画/复仇者/1.jpg" alt=""></div>
<div class="box2"><img src="./动画/复仇者/2.jpg" alt=""></div>
<div class="box3"><img src="./动画/复仇者/3.jpg" alt=""></div>
<div class="box4"><img src="./动画/复仇者/4.jpg" alt=""></div>
<div class="box5"><img src="./动画/复仇者/5.jpg" alt=""></div>
<div class="box6"><img src="./动画/复仇者/6.jpg" alt=""></div>
</body>
</html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
margin: 100px auto;
.box img {
transition: all 2s;
transform-origin: left top;
.box img:hover {
/* transform: scaleX(2); */
/* transform: scaleY(0.2); */
/* 下拉效果 */
transform: scale(0.2, 2);
</style>
</head>
<div class="box">
<img src="./动画/复仇者/1.jpg" alt="">
</body>
</html>
