css:用css实现图片旋转轮播3d效果

最新推荐文章于 2024-04-25 08:35:45 发布

喵姑娘呀

最新推荐文章于 2024-04-25 08:35:45 发布

阅读量1.6k

点赞数

分类专栏： demo 文章标签：旋转轮播 3d空间 transform-style

本文链接：https://blog.csdn.net/weixin_43389331/article/details/89475879

版权

这篇博客介绍了如何利用CSS3的transform-style属性在3D空间中创建图片旋转轮播效果。通过设置transform-style为preserve-3d，保持子元素的3D位置，结合旋转角度，可以实现图片的3D旋转展示。文章提到该属性不被IE支持，并提供了简单的实现代码。

摘要由CSDN通过智能技术生成

CSS3的transform-style:

:css3属性，在3d空间非常重要的一个属性，有两个值：

flat 子元素将不保留其 3D 位置，默认值。
preserve-3d 子元素将保留其 3D 位置。
要注意的是ie不支持
transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
效果显示效果图
思路：把六张图片放在一起，每张图片转换角度，角度自己调试，中间一张图片作为中心轴，然后添加动效果：
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				perspective: 1000px;
			}
			section{
				width: 300px;
				height: 200px;
				margin: 100px auto;
				background: url(img/coco.png) no-repeat;
				background-size: cover;
				position: relative;
				transform-style: preserve-3d;//透视效果，一定要添加，不然会出现动画滚动是平面效果。
				transition: all 10s linear;
			}
			section:hover{
				transform: rotateY(360deg);