3D效果
2020-11-20 本文已影响0人
莣忧草_3b53
- transition从一个属性值变化到另外一个属性值的一个动画效果
- animation产生更加复杂的动画
transition: <过度属性名称> 过度时间 <过渡模式>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
transform-style: preserve-3d 展示为3D
CSS3产生3D场景
perspective: 物理离窗口距离
perspective-origin: 人的观察点
image.png
translate: 位移
rotate: 旋转
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div#div1
{
perspective:800;
perspective-origin: 50% 50%;
transform-style: preserve-3d;
}
div#div2
{
width:500px;
height:500px;
background-color:red;
border:1px solid black;
transform:rotateY(45deg);
-webkit-transform:rotateY(45deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
