translate3d绕轴旋转

全栈程序员站长

发布于 2022-11-15 10:55:01

6230

发布于 2022-11-15 10:55:01

<!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>Document</title>
<style>
/****************再次注意让图片完美切合盒子给图片设置宽高100%****************/
div img {
width: 100%;
height: 100%;
}
.xbox {
width: 300px;
height: 300px;
display: inline-block;
border: 1px solid black;
}
.xbox1 {
width: 200px;
height: 200px;
border: 1px solid brown;
margin-top: 50px;
margin-left: 50px;
transition: all 1s;
}
.xbox1:hover {
transform: rotateX(55deg);
}
.Xbox {
width: 300px;
height: 300px;
display: inline-block;
border: 1px solid black;
perspective: 500px;
}
.Xbox1 {
width: 200px;
height: 200px;
border: 1px solid brown;
margin-top: 50px;
margin-left: 50px;
transition: all 1s;
}
.Xbox1:hover {
transform: rotateX(55deg);
}
/************************Y************************/
.ybox {
width: 300px;
height: 300px;
display: inline-block;
border: 1px solid black;
}
.ybox1 {
width: 200px;
height: 200px;
border: 1px solid brown;
margin-top: 50px;
margin-left: 50px;
transition: all 1s;
}
.ybox1:hover {
transform: rotateY(55deg);
}
.Ybox {
width: 300px;
height: 300px;
display: inline-block;
border: 1px solid black;
perspective: 500px;
}
.Ybox1 {
width: 200px;
height: 200px;
border: 1px solid brown;
margin-top: 50px;
margin-left: 50px;
transition: all 1s;
}
.Ybox1:hover {
transform: rotateY(55deg);
}
/***************************Z轴旋转**********************/
.zbox {
width: 300px;
height: 300px;
display: inline-block;
border: 1px solid black;
}
.zbox1 {
width: 200px;
height: 200px;
border: 1px solid brown;
margin-top: 50px;
margin-left: 50px;
transition: all 1s;
}
.zbox1:hover {
transform: rotateZ(55deg);
}
.Zbox {
width: 300px;
height: 300px;
display: inline-block;
border: 1px solid black;
perspective: 500px;
}
.Zbox1 {
width: 200px;
height: 200px;
border: 1px solid brown;
margin-top: 50px;
margin-left: 50px;
transition: all 1s;
}
.Zbox1:hover {
transform: rotateZ(55deg);
}
/**********************************侧轴*******************************/
.cbox {
width: 300px;
height: 300px;
display: inline-block;
border: 1px solid black;
}
.cbox1 {
width: 200px;
height: 200px;
border: 1px solid brown;
margin-top: 50px;
margin-left: 50px;
transition: all 1s;
}
.cbox1:hover {
transform: rotate3d(1, 1, 0, 55deg);
/****x,y,z,旋转角度***/
}
.Cbox {
width: 300px;
height: 300px;
display: inline-block;
border: 1px solid black;
perspective: 500px;
}
.Cbox1 {
width: 200px;
height: 200px;
border: 1px solid brown;
margin-top: 50px;
margin-left: 50px;
transition: all 1s;
}
.Cbox1:hover {
transform: rotate3d(1, 1, 0, 55deg);
/****x,y,z,旋转角度***/
}
</style>
</head>
<body>
<p>沿着x轴旋转:两个都是绕x轴旋转55度第一个不加(perspective)透视(透视会给人一种元素前添加了空间的感觉),
旋转是左手法则大拇指指向对应轴的正方向左手其余手指弯曲的方向就是正旋转方向(顺时针)
</p>
<div class="xbox">
<div class="xbox1"><img src="../../imags/ggg.jpg"></div>
</div>
<div class="Xbox">
<div class="Xbox1"><img src="../../imags/ggg.jpg"></div>
</div>
<p>沿着Y轴旋转:两个都是绕Y轴旋转55度第一个不加(perspective)透视--------------------------沿着Z轴旋转:两个都是绕Z轴旋转55度第一个不加(perspective)透视</p>
<div class="ybox">
<div class="ybox1"><img src="../../imags/ggg.jpg"></div>
</div>
<div class="Ybox">
<div class="Ybox1"><img src="../../imags/ggg.jpg"></div>
</div>
<div class="zbox">
<div class="zbox1"><img src="../../imags/ggg.jpg"></div>
</div>
<div class="Zbox">
<div class="Zbox1"><img src="../../imags/ggg.jpg"></div>
</div>
<p>侧轴旋转</p>
<div class="cbox">
<div class="cbox1"><img src="../../imags/ggg.jpg"></div>
</div>
<div class="Cbox">
<div class="Cbox1"><img src="../../imags/ggg.jpg"></div>
</div>
</body>
</html>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/234606.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年11月1日，如有侵权请联系 cloudcommunity@tencent.com 删除

https