HTML---3D变换

最新推荐文章于 2023-11-18 20:42:33 发布
最新推荐文章于 2023-11-18 20:42:33 发布
阅读量210 收藏
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46016070/article/details/106808492
版权 
<!DOCTYPE html>
<html>
<head>
	<title>3D变换</title>
	<style type="text/css">
		.box{
			height: 650px;
			width: 300px;
			float: left;
			transition: linear 1s;
			transform-style: preserve-3d;
			margin-right: 20px;
			margin-left: 20px;
		}
		img{
			width: 300px;
			height: 650px;

		}
		<--!现在是变换之后，要是想鼠标点到它的时候变换就在.X后加上hover-->
		.
			transform: rotateX(60deg);
			perspective:100px;
		}
		.y{
			transform: rotateY(60deg);
			perspective:100px;
		}
		.z{
			transform: rotateZ(60deg);
			perspective:100px;
		}
	</style>
</head>
<body>
	<div class="box"><img class="x" src="js5.jpg"></div>
	<div class="box"><img class="y" src="js5.jpg"></div>
	<div class="box"><img class="z" src="js5.jpg"></div>
	<--!照片的命名不能用中文-->
</body>
</html>

在这里插入图片描述

麻薯小熊仔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
html元素做3d变换,CSS 3D变换
weixin_30113575的博客
07-04 318
1、3D transform中有下面这三个方法：rotateX( angle )rotateY( angle )rotateZ( angle )意思是分别绕着X/Y/Z轴进行旋转。学过一部分数学知识的人应该都能理解这里XYZ轴的意思。可参见下图：笛卡尔坐标系2、perspective属性perspective属性的存在与否决定了所看到的是2D的还是3D的。 没有透视，就不能称为3D。3D透视CSS...
html3d变换风格,3d变换.html
weixin_30423863的博客
06-17 103
无标题文档.wrap{width:100px;height:100px;padding:100px; border:5px solid #000; margin:100px auto; -webkit-perspective:200px; -webkit-perspective-origin:center center; -moz-perspective:200px; -moz-perspecti...
HTML5和CSS3实现3D转换效果 CSS3的3D效果
weixin_30388677的博客
05-01 242
　　上次，我们一起研究了css3的2d模块，这次我们一起来看一下css3的3d模块。 　　首先，我们来了解一下3d的坐标系，x轴在屏幕上为水平方向，y轴为垂直方向，而z轴为垂直于屏幕的方向。 　　不理解的话可以参考定位属性的z-index属性，那个在某种意义上就是让元素在z轴的移动。 　　在2d转换模块中我们研究了rotateX()和rotateY()方法，就是绕x轴和y轴旋转，这其实就是3...
CSS3——3D 转换
qq_43498002的博客
10-19 211
cHTML5 一、 认识 3D 转换 3D 的特点 近大远小 物体和面遮挡不可见 三维坐标系 x 轴：水平向右 – 注意：x 轴右边是正值，左边是负值 y 轴：垂直向下 – 注意：y 轴下面是正值，上面是负值 z 轴：垂直屏幕 – 注意：往外边的是正值，往里面的是负值 ​ 二、3D 转换 3D 转换知识要点 3D 位移：translate3d(x, y, z) 3D 旋转：rotate3d(x, y, z) 透视：perspctive 3D呈现 transfrom
html 3d转换,CSS3 3D转换
weixin_35260789的博客
06-01 82
我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子。有什么特点近大远小物体后面遮挡不可见6.1 三维坐标系三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。x轴：水平向右 注意：x右边是正值，左边是负值y轴：垂直向下 注意：y下面是正值，上面是负值z轴：垂直屏幕 注意：往外面是正值，往里面是负值3D转换我们主要学习工作中最常用的3D位移和3D旋转主要知识点3D位移：transl...
纯CSS实现旋转相册-3D旋转-悬停效果.html
04-18
通过设置容器的transform-style属性为preserve-3d，使得容器内的元素可以在3D空间中进行变换。通过设置容器的transform属性为rotateY，使得容器在Y轴上进行旋转，从而实现相册图片的3D旋转效果。同时，通过设置img...
html5-3D音乐盒
09-08
一个简单好看的3d音乐盒子，旋转的立方体，配合一些css3的动画和过渡变换属性。 希望能给大家一些参考
02-CSS3之3D变换.html
09-03
02-CSS3之3D变换
3D模型--百行代码实现旋转立体魔方
01-31
首先你需要下载html5开源库件lufylegend-1.4.0魔方分为6个面，每个面由9个小矩形组成，现在我把每个小矩形当做一个类封装起来，因为现在建立的是一个3D魔方，所以要画出每个小矩形，需要知道小矩形的4个定点，而这4...
html5实现 图片3D转换
02-27
搜集而来的 html5实现 图片3D转换
HTML5学习笔记—CSS3 transform转换属性（2D/3Dtransform方法）
ccnanxi的博客
01-03 1032
transform方法 table{ border:3px solid yellow; border-collapse:collapse; } td,th{ border:1px solid pink; } 转换属性 下面的表格列出了所有的转换属性： <table class="dataintable"> 属性 描述 CSS transform 向元素应用 2D 或 3D 转换
CSS3之3D变换实例详解
weixin_33853827的博客
08-27 129
CSS3的3D效果很赞，本文实现简单的两种3D翻转效果。首先看效果和源代码，文末是文绉绉的总结部分^_^ 以下CSS代码为了简洁没有添加前缀，请视情况自行添加（自动化时代推荐使用其他的一些方法，如gulp-autoprefixer插件，因为本人更喜欢gulp #_#） 还有w3school上面的这句话早已经过时： 目前为止，现代浏览器基本都支持无前缀的3D变换的相关属性（除了IE，以及...
HTML空间转换&动画（附走马灯、3D导航案例）
最新发布
MiraitowaL的博客
11-18 260
html空间转换和动画效果，内含走马灯和3D导航案例
登录页面、注册页面、HTML的3D转换
m0_45309627的博客
06-09 618
一、HTML登录页面设计（使用正则表达式验证邮箱和密码） 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" conte.
html+3d转换动画效果图,利用HTML5+CSS3实现3D转换效果实例详解
weixin_39767983的博客
05-30 391
前言本文介绍的是css3的3d模块，对大家具有一定的参考价值，感兴趣的朋友们下面来一起看看吧。介绍首先，我们来了解一下3d的坐标系，x轴在屏幕上为水平方向，y轴为垂直方向，而z轴为垂直于屏幕的方向。不理解的话可以参考定位属性的z-index属性，那个在某种意义上就是让元素在z轴的移动。在2d转换模块中我们研究了rotateX()和rotateY()方法，就是绕x轴和y轴旋转，这其实就是3d模块的一...
CSS3之 3D变换、3D动画
努力，追梦的博客
05-03 1471
CSS3之 3D变换、3D动画 3D变换 transform-style（preserve-3d） 建立3D空间 Perspective 景深（类似于站在多远地方看） Transform 新增函数   1)  rotateX()   .box{width:100px;height:100px;padding:100px;border:5pxsolid #000;margin:3
CSS3——2D、3D变换
会飞的笨蛋Y的博客
02-24 156
2D transform: none|transform-functions; transform-origin: x y ;------设置变换中心。 （x，y可以是像素值、百分比或方位名词–均是相对于自身左上角为起点而言） 一、位移 //平移 transform: translate(x, y); transform: translateX(n); transform: translateY...
HTML5（七）——3D转换
C-A-L-D
03-31 528
在盒子（舞台）中添加样式： transform:rotate3d(1,1,1,50deg);/*给盒子（舞台）进行旋转，这样才能出现视角*/ transform-style:preserve-3d;/*让元素保留3D变换后的效果*/ <style> .box { width: 500px; ...
移动web复习第二天
weixin_45650436的博客
12-05 326
空间转换3D 目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果 1.3D坐标系 3D 坐标系比2D 多了一个Z轴。 一定要记住3个坐标轴取值的正反： X 轴 往右越大，是正值， 否则反之 Y 轴 往下越大，是正值，否则反之 Z轴 往里越大，是正值，否则反之 Z轴指向我们 2.3D位移 /*完整写法*/ transform: translate3d(x, y, z); /*分开写法*/ transform: trans...
-webkit-transform 示例
09-20
总之，-webkit-transform 是用于WebKit浏览器引擎的一个CSS样式属性，用于对元素进行2D或3D变换，可以通过改变属性值实现各种效果，提供了强大的设计和动画功能。 ### 回答3： -webkit-transform 是一个 CSS3 的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

麻薯小熊仔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值