css3D效果

最新推荐文章于 2022-11-10 21:27:46 发布

chuansejia3960

最新推荐文章于 2022-11-10 21:27:46 发布

阅读量84

点赞数

原文链接：https://my.oschina.net/u/2460998/blog/618181

版权

1.（3D 沿着Y 轴转）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D旋转Y轴</title>
</head>
<style>
div{
width: 200px;
height: 200px;
margin:100px 100px;
perspective:300px;
position: relative;
border: 1px solid #000;
}
img{
width: 200px;
height: 200px;
border-radius: 100px;
transition: all 1s;
position: absolute;
top:0;
left:0;
backface-visibility: hidden;/* 背后影藏*/
}
.c1{
z-index:1;
}
.c2{
transform: rotateY(-180deg);
}
div:hover .c1{
transform:rotateY(-180deg);
}
div:hover .c2{
transform:rotateY(0deg);
}
</style>
<body>
<div>
<img src="./t02.jpg" alt="girl">
<img src="./hy.jpg" alt="qq" width="200px" height="200px">
</div> 
</body>
</html>

2.头像缩放（scale）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
#pic-scale{
width:300px;
height:256px;
border:1px solid red;
margin: 100px auto;
position: relative;
overflow: hidden;
}
#pic-scale img{
transition: all 0.5s;
cursor: pointer;
}
#pic-scale img:hover{
transform: scale(1.2);

}
#pic-scale span{
background: #fff;
opacity: 0.5;
display: none;
position: absolute;
top:216px;
text-align: center;
line-height: 40px;
}
</style>
<body>
<div id="pic-scale" >
<img src="./t02.jpg" alt="qqmusic" onmouseover="over()" onmouseout="out()">
<span id="hy">哈哈哈哈</span>
</div>
<script>
function over(){
var  hy =document.getElementById("hy");
hy.style.display="block";
hy.style.height="40px";
hy.style.width="300px";
}
function out(){
var  hy =document.getElementById("hy");
hy.style.display="none";
}
</script>
</body>
</html>

3.下拉框的下三角设置border-tranparent-rorate

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三角</title>
</head>
<style>
#input{
width: 200px;
height: 50px;
border: 1px solid #000;
position: relative;
}
input{
width: 150px;
height: 40px;
position: absolute;
}
#input #sj{
width: 30px;
height: 30px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
position: absolute;
top:2px;
right: 2px;
transform:rotate(45deg);
}
</style>
<body>
<div id="input">
<input type="text">
<div id="sj"></div>
</div>
</body>
</html>

4.mask

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
#img-container{
        position: relative;
        width: 200px;
        height: 100px;
        border: 5px solid #40BCFF;
    }

    .img-left{
        background: url(hy.jpg);
        background-size: cover;
        width: 100%;
        height: 100%;
    }

    .img-right{
        position: absolute;
        left: 0;
        top: 0;
        background: url(c5131475jw1f12c2fetnrj20rs0hdjrd.jpg);
        background-size: cover;
        -webkit-mask-image: -webkit-linear-gradient(left top, transparent 50%, white 50%);
        width: 100%;
        height: 100%;
    }
</style>
<body>
<div id="img-container">
<div></div>
<div></div>
</div>
</body>
</html>

5.打开的盒子（3D 沿着X 轴转）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>打开的盒子</title>
</head>
<style>
div{
width: 300px;
height: 256px;
margin: 100px auto;
position: relative;
}
img{
border-radius: 150px;
position: absolute;
top:0;
transition: all 0.5s;
}
div:hover .img2{
transform-origin: bottom;
transform: rotateX(180deg);
}
</style>
<body>
<div>
<img src="./t02.jpg" alt="girl">
<img class="img2 "src="./t02.jpg" alt="girl">
</div>
</body>
</html>