Javascript-форум (https://javascript.ru/forum/)
-   Оффтопик (https://javascript.ru/forum/offtopic/)
-   -   Не работает css 3d transform rotateY (https://javascript.ru/forum/offtopic/34610-ne-rabotaet-css-3d-transform-rotatey.html)

godofjavascript 11.01.2013 23:10
Не работает css 3d transform rotateY
 
<body>

<style type="text/css">

	div {
		width            : 300px;
		height           : 100px;
		background-color : red;
		margin           : 10px;
		}

	.rotate {
		-webkit-transform : rotateY(45deg);
		-moz-transform    : rotateY(45deg);
		-o-transform      : rotateY(45deg);
		transform         : rotateY(45deg);
		}

</style>


<div>box</div>
<div class="rotate">rotate box</div>

</body>


а вот тут все работает, в чем магия?

http://desandro.github.com/3dtransfo...functions.html

l-liava-l 11.01.2013 23:23 
<!DOCTYPE html>
<html>
<body>

<style type="text/css">

	div {
		width            : 300px;
		height           : 100px;
		background-color : red;
		}

	.rotate {
        background:url('http://im5-tub-ru.yandex.net/i?id=102292550-52-72&n=21');
		transform:rotateY(100deg);
        -ms-transform:rotateY(100deg); 
        -moz-transform:rotateY(100deg);
        -webkit-transform:rotateY(100deg); 
        -o-transform:rotateY(100deg);
		}

</style>


<div>box</div>
<div class="rotate">rotate box</div>

</body>
<html>
так работает

godofjavascript 11.01.2013 23:25
нет

Gozar 11.01.2013 23:28
perspective

l-liava-l 11.01.2013 23:28
Может не замечаешь? удали ротацию или блок картинкой залей

godofjavascript 11.01.2013 23:30
в таком случае глючит отладчик хрома так как не показывает ни какого свойства perspective.

Gozar 11.01.2013 23:30 
<body>

<style type="text/css">

	.d {
		width            : 300px;
		height           : 100px;
		margin           : 10px;
-webkit-perspective: 600px;
perspective: 600px;
		}

	.rotate {
		background-color : red;
width:100%;
height:100%;
        -ms-transform:rotateY(30deg);
        -moz-transform:rotateY(30deg);
        -webkit-transform:rotateY(30deg);
        -o-transform:rotateY(30deg);
	transform: rotateY(45deg);
		}

</style>


<div class="d">
<div class="rotate">rotate box</div>
</div>
</body>

godofjavascript 11.01.2013 23:32
Gozar,

l-liava-l 11.01.2013 23:34
godofjavascript,
мой код выше работает
http://itmages.ru/image/view/842742/bfb709e1

Gozar 11.01.2013 23:34
godofjavascript,
А пораскинуть мозгами?!

-webkit-perspective: 600px;

Обновил код выше.

Gozar 11.01.2013 23:35
l-liava-l,
Сделай вот так [ html run] и не надо нам твоих скринов.

Gozar 11.01.2013 23:37
l-liava-l,

<!DOCTYPE html>
<html>
<body>

<style type="text/css">

	div {
		width            : 300px;
		height           : 100px;
		background-color : red;
		}

	.rotate {

		transform:rotateY(30deg);
        -ms-transform:rotateY(30deg); 
        -moz-transform:rotateY(30deg);
        -webkit-transform:rotateY(30deg); 
        -o-transform:rotateY(30deg);
		}

</style>


<div>box</div>
<div class="rotate">rotate box</div>

</body>
<html>

И в каком браузере твой код работает? У меня он ни в одном не завелся.

godofjavascript 11.01.2013 23:40
Цитата:
Сообщение от Gozar
А пораскинуть мозгами?!
я думал ты пораскинул ими за меня и прописал префиксы? спасибо, про это своство знал но как то подучал что его убрали раз оно не показывается в отладцике хрома. тогда такой вопрос, почему оно не показывается в отладчике хрмоа(?

это же баг?

Gozar 11.01.2013 23:41
Цитата:
Сообщение от godofjavascript
я думал ты пораскинул ими за меня и прописал префиксы
Будем считать, что это спасибо.

l-liava-l 11.01.2013 23:42
Цитата:
И в каком браузере твой код работает? У меня он ни в одном не завелся.
хром 24.0.1312.52 m завелось
мозилка 18 тоже.

godofjavascript 11.01.2013 23:47
Цитата:
Сообщение от Gozar
Будем считать, что это спасибо.
а я вроде сказал спасибо? не)? спасибо еще раз огромное

godofjavascript 11.01.2013 23:50
все, понял перспектива же родителю задается, как бы расстояние от родителя до детей... я соупок, спасибо гозар


Часовой пояс GMT +3, время: 13:35.