HTML5+CSS3实现3D效果

最新推荐文章于 2024-06-27 12:41:50 发布

爱篮球的程序猿

最新推荐文章于 2024-06-27 12:41:50 发布

阅读量695

点赞数 1

文章标签： css3 css html5 html

本文链接：https://blog.csdn.net/lpkjjshssb/article/details/104440867

版权

前段时间看了一下3d效果挺有趣的,下面我给大家看一下我用css3的3D效果，先给大家看一下效果图：这是我做的一个旋转木马的照片
需要做到以上效果需要我们了解transition过渡、transform变形，以及transform3D属性，下面是他们的相关属性与应用环境：

transsition过渡：
	transition-property :规定设置过渡效果的CSS属性的名称。
	transition-duration :规定完成过渡效果需要多少秒或毫秒。
	transition-delay : 定义过渡效果何时开始。
	transition-timing-function : 规定速度效果的速度曲线（liner,ease...等）
	扩展：贝赛尔曲线(http://cubic-bezier.com)。
	复合写法：没有顺序，但是先写的时间一定是总时间


transform变形:
	translate(x,y) :位移(translateX,translateY,translateZ)，x,y是相对x,y轴。
	scale(num) :缩放(scaleX,scaleY,scaleZ)，num为一个比例值,默认为1。
	rotate(num) :旋转(rotateX,rotateY,rotateZ),num是旋转的角度,单位为deg或弧度
	skew (x,y):斜切(skewX,skewY),num1和num2都是角度，针对的是x,y轴
	transform-origin()：基点位置（默认是中心点）
	注：当设置的位移在后面三个值后面是将会受到前面的影响，比如前面是旋转，后面是位移，他将会是旋转后再位移，以旋转后的面为平面进行位移。


tranform中可以实现3D效果有哪些：
	rotateX():正值向上翻转
	rotateY():正值向右翻转
	rotateZ():正值向前翻转,负值向后
	scaleZ():立体元素的厚度
tranform3D属性：
	perspective(景深,简称3D眼镜) : 离屏幕多远的距离去观察元素，值越大幅度越小
	transform-style : 3D空间：flat  (默认值2d)、preserve-3d   (3d，产生一个三维空间)
	perspective-origin : 景深-基点位置，观察元素的角度
	backface-visibility : 背面隐藏，hidden、visible (默认值)

学习了以上内容，就能实现今天要做的3D效果了，具体代码如下：

<!DOCTYPE html>
			<html lang="en">
			<head>
			    <meta charset="UTF-8">
			    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			    <title>Document</title>
			    <style>
			        *{
			            margin: 0;
			            padding: 0;
			        }
			        #main{
			            width: 400px;
			            height: 400px;
			            border: 1px solid red;
			            margin: 20px auto;
			            perspective:400px;
			            backface-visibility: hidden;
			            perspective-origin: center;
			        }
			        #main ul{
			            width:400px;
			            height: 400px; 
			            margin:0px;
			            list-style: none;
			            position: relative;
			            transform-style: preserve-3d;
			            transition: 6s;
			        }
			        #main  li{
			            margin-top: -64px;
			            -webkit-box-reflect:below 5px linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.5));
			            position: absolute;
			            left: 130px;
			            top: 50%;
			        }
			        #main li:nth-of-type(1){
			            transform: rotateY(0deg) translateZ(-150px);
			        }
			        #main li:nth-of-type(2){
			            transform: rotateY(0deg) translateZ(150px);
			        }
			        #main li:nth-of-type(3){
			            transform: rotateY(60deg) translateZ(-150px);
			        }
			        #main li:nth-of-type(4){
			            transform: rotateY(60deg) translateZ(150px);
			        }
			        #main li:nth-of-type(5){
			            transform: rotateY(-60deg) translateZ(-150px);
			        }
			        #main li:nth-of-type(6){
			            transform: rotateY(-60deg) translateZ(150px);
			        }
			        #main:hover ul{
			            transform: rotateY(360deg);
			        }
			    </style>
			</head>
			<body>
			    <div id="main">
			        <ul>
			            <li><img src="./img/1.jpg" alt=""></li>
			            <li><img src="./img/2.jpg" alt=""></li>
			            <li><img src="./img/3.jpg" alt=""></li>
			            <li><img src="./img/4.jpg" alt=""></li>
			            <li><img src="./img/5.jpg" alt="" width="128px" height="94px"></li>
			            <li><img src="./img/6.jpg" alt="" width="128px" height="94px"></li>
			        </ul>
			    </div>
			</body>
			</html>

具体技术仅供参考！

爱篮球的程序猿

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML5+CSS3实现3D效果

经过三周的逆战班学习，自己有了很大的提升，接下来由我来给大家介绍一下css3的3D效果，先给大家看一下效果图：需要做到以上效果需要我们了解transition过渡、transform变形，以及transform3D属性，下面是他们的相关属性与应用环境：transsition过渡： transition-property :规定设置过渡效果的CSS属性的名称。 transition-dura...
复制链接

扫一扫